轮播实现 react

使用 React 实现轮播

在 React 中实现轮播可以通过多种方式完成，以下是几种常见的方法：

使用第三方库（如 react-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 Carousel = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
  };

  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>
  );
};

export default Carousel;

自定义轮播组件

创建一个简单的自定义轮播组件：

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

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

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

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

export default CustomCarousel;

使用 CSS 动画

结合 CSS 动画实现平滑过渡：

import React, { useState, useEffect } from 'react';
import './Carousel.css';

const CSSCarousel = ({ items }) => {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIndex((prevIndex) => (prevIndex + 1) % items.length);
    }, 3000);
    return () => clearTimeout(timer);
  }, [index, items.length]);

  return (
    <div className="carousel-container">
      <div
        className="carousel-track"
        style={{ transform: `translateX(-${index * 100}%)` }}
      >
        {items.map((item, i) => (
          <div key={i} className="carousel-slide">
            {item}
          </div>
        ))}
      </div>
    </div>
  );
};

export default CSSCarousel;

对应的 CSS 文件：

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

添加导航按钮

为自定义轮播添加导航控制：

const CarouselWithControls = ({ slides }) => {
  const [current, setCurrent] = useState(0);

  const nextSlide = () => {
    setCurrent((prev) => (prev === slides.length - 1 ? 0 : prev + 1));
  };

  const prevSlide = () => {
    setCurrent((prev) => (prev === 0 ? slides.length - 1 : prev - 1));
  };

  return (
    <div className="carousel">
      <button onClick={prevSlide}>Previous</button>
      {slides.map((slide, index) => (
        <div
          key={index}
          className={index === current ? 'slide active' : 'slide'}
        >
          {slide}
        </div>
      ))}
      <button onClick={nextSlide}>Next</button>
    </div>
  );
};

响应式轮播

实现响应式轮播，根据屏幕宽度调整显示数量：

const ResponsiveCarousel = ({ items }) => {
  const [current, setCurrent] = useState(0);
  const [slidesToShow, setSlidesToShow] = useState(1);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) setSlidesToShow(3);
      else if (window.innerWidth >= 768) setSlidesToShow(2);
      else setSlidesToShow(1);
    };
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const visibleItems = items.slice(current, current + slidesToShow);

  return (
    <div>
      <button onClick={() => setCurrent(Math.max(0, current - 1))}>Prev</button>
      <div style={{ display: 'flex' }}>
        {visibleItems.map((item, i) => (
          <div key={i} style={{ width: `${100 / slidesToShow}%` }}>
            {item}
          </div>
        ))}
      </div>
      <button
        onClick={() =>
          setCurrent(Math.min(items.length - slidesToShow, current + 1))
        }
      >
        Next
      </button>
    </div>
  );
};

以上方法提供了从简单到复杂的轮播实现方案，可以根据项目需求选择合适的实现方式。第三方库如 react-slick 提供了丰富的功能和配置选项，而自定义实现则提供了更大的灵活性和控制权。