react 函数组件轮播图

可以使用一些第三方库来实现轮播图，例如 react-slick 或者 react-swipeable-views。以下是一个使用 react-slick 实现的简单轮播图组件：

import React from 'react';
import Slider from 'react-slick';

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1,
};

const Carousel = ({ images }) => {
  return (
    <Slider {...settings}>
      {images.map((image, index) => (
        <div key={index}>
          <img src={image} alt={`slide ${index}`} />
        </div>
      ))}
    </Slider>
  );
};

export default Carousel;

在上面的代码中，我们使用 `Slider` 组件包裹了多个 `div` 元素，每个 `div` 元素对应一个轮播图的图片。`settings` 对象定义了轮播图的一些配置，例如是否显示小圆点、每次轮播的图片数量等。最后，我们将 `Slider` 组件和 `settings` 对象传递给 `Carousel` 组件，该组件渲染出一个可以滑动的轮播图。