react 中如何设置轮播图

使用 react-slick 设置轮播图

react-slick 是一个流行的 React 轮播组件库，基于 jQuery 的 slick 轮播插件。安装 react-slick 及其依赖：

npm install react-slick slick-carousel

基本使用示例：

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const MySlider = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return (
    <Slider {...settings}>
      <div><img src="image1.jpg" alt="Slide 1"/></div>
      <div><img src="image2.jpg" alt="Slide 2"/></div>
      <div><img src="image3.jpg" alt="Slide 3"/></div>
    </Slider>
  );
};

使用 Swiper 设置轮播图

Swiper 是一个功能强大的现代轮播库，支持触摸手势和响应式设计。安装 Swiper：

npm install swiper

基本使用示例：

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

const MySwiper = () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={1}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide><img src="image1.jpg" alt="Slide 1"/></SwiperSlide>
      <SwiperSlide><img src="image2.jpg" alt="Slide 2"/></SwiperSlide>
      <SwiperSlide><img src="image3.jpg" alt="Slide 3"/></SwiperSlide>
    </Swiper>
  );
};

自定义轮播组件

如果需要完全控制轮播行为，可以创建自定义轮播组件：

import React, { useState, useEffect } from "react";

const CustomCarousel = ({ slides }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % slides.length);
    }, 3000);
    return () => clearInterval(interval);
  }, [slides.length]);

  return (
    <div style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ 
        display: "flex", 
        transform: `translateX(-${currentIndex * 100}%)`,
        transition: "transform 0.5s ease"
      }}>
        {slides.map((slide, index) => (
          <div key={index} style={{ flex: "0 0 100%" }}>
            {slide}
          </div>
        ))}
      </div>
    </div>
  );
};

轮播图最佳实践

确保轮播图在移动设备上表现良好，添加触摸支持。使用懒加载优化性能：

// 在 react-slick 中
const settings = {
  lazyLoad: "ondemand",
  touchThreshold: 10,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
};

为可访问性考虑，添加 ARIA 属性和键盘导航支持：

<div role="region" aria-label="Image carousel">
  <Slider {...settings}>
    {/* slides */}
  </Slider>
</div>