react如何写轮播图

使用 react-slick 实现轮播图

react-slick 是一个基于 slick-carousel 的 React 轮播组件，功能丰富且易于使用。

安装依赖：

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";

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

  return (
    <Slider {...settings}>
      <div><h3>Slide 1</h3></div>
      <div><h3>Slide 2</h3></div>
      <div><h3>Slide 3</h3></div>
    </Slider>
  );
}

使用 Swiper.js 实现轮播图

Swiper 是另一个流行的轮播库，对移动端支持良好。

安装依赖：

npm install swiper

基础实现代码：

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

function App() {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={1}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}

自定义实现简单轮播图

如果不依赖第三方库，可以通过 useState 和 useEffect 实现基础轮播功能。

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

function SimpleCarousel({ slides }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      setCurrentIndex((prevIndex) => 
        prevIndex === slides.length - 1 ? 0 : prevIndex + 1
      );
    }, 3000);
    return () => clearTimeout(timer);
  }, [currentIndex, slides.length]);

  return (
    <div style={{ position: 'relative', height: '400px', overflow: 'hidden' }}>
      {slides.map((slide, index) => (
        <div 
          key={index}
          style={{
            position: 'absolute',
            width: '100%',
            opacity: index === currentIndex ? 1 : 0,
            transition: 'opacity 1s ease-in-out'
          }}
        >
          {slide}
        </div>
      ))}
    </div>
  );
}

轮播图常见功能配置

自动播放配置（react-slick）：

const settings = {
  autoplay: true,
  autoplaySpeed: 2000,
  pauseOnHover: true
};

响应式配置（react-slick）：

const settings = {
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2
      }
    }
  ]
};

导航按钮（Swiper）：

<Swiper
  navigation
  pagination={{ clickable: true }}
>
  {/* slides */}
</Swiper>