在一个页面中有多个幻灯片的Reactjs滑块(Carousel)

npm install react-bootstrap react-slick slick-carousel

import React from 'react';
import { Carousel } from 'react-bootstrap';
import Slider from 'react-slick';

const CarouselComponent = () => {
  const slides = [
    {
      id: 1,
      image: 'slide1.jpg',
      caption: 'Slide 1',
    },
    {
      id: 2,
      image: 'slide2.jpg',
      caption: 'Slide 2',
    },
    // 添加更多的幻灯片对象
  ];

  const settings = {
    dots: true, // 显示导航点
    infinite: true, // 无限循环
    speed: 500, // 切换速度
    slidesToShow: 1, // 每次显示的幻灯片数量
    slidesToScroll: 1, // 每次滚动的幻灯片数量
    autoplay: true, // 自动播放
    autoplaySpeed: 3000, // 自动播放间隔时间
    // 添加更多的配置项
  };

  return (
    <Carousel>
      {slides.map((slide) => (
        <Carousel.Item key={slide.id}>
          <img
            className="d-block w-100"
            src={slide.image}
            alt={slide.caption}
          />
          <Carousel.Caption>
            <h3>{slide.caption}</h3>
          </Carousel.Caption>
        </Carousel.Item>
      ))}
    </Carousel>
  );
};

export default CarouselComponent;

import React from 'react';
import CarouselComponent from './CarouselComponent';

const HomePage = () => {
  return (
    <div>
      <h1>首页</h1>
      <CarouselComponent />
    </div>
  );
};

export default HomePage;