当前位置：首页 > React

如何用react写轮播

2026-01-24 20:38:20React

使用React实现轮播组件

基本结构

创建一个基础的轮播组件需要管理当前显示的幻灯片索引和切换逻辑。使用useState来跟踪当前激活的幻灯片。

import React, { useState } from 'react';

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

  const goToNext = () => {
    setCurrentIndex((prevIndex) => 
      prevIndex === slides.length - 1 ? 0 : prevIndex + 1
    );
  };

  const goToPrev = () => {
    setCurrentIndex((prevIndex) => 
      prevIndex === 0 ? slides.length - 1 : prevIndex - 1
    );
  };

  return (
    <div className="carousel">
      <button onClick={goToPrev}>Previous</button>
      <div className="slide">
        {slides[currentIndex]}
      </div>
      <button onClick={goToNext}>Next</button>
    </div>
  );
}

自动轮播

通过useEffect和setInterval实现自动轮播功能。注意清除定时器以避免内存泄漏。

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prevIndex) => 
        prevIndex === slides.length - 1 ? 0 : prevIndex + 1
      );
    }, interval);
    return () => clearInterval(timer);
  }, [slides.length, interval]);

  return (
    <div className="carousel">
      <div className="slide">
        {slides[currentIndex]}
      </div>
    </div>
  );
}

添加指示器

在轮播底部添加小圆点指示器，显示当前激活的幻灯片。

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

  const goToSlide = (index) => {
    setCurrentIndex(index);
  };

  return (
    <div className="carousel">
      <div className="slide">
        {slides[currentIndex]}
      </div>
      <div className="dots">
        {slides.map((_, index) => (
          <span 
            key={index}
            className={`dot ${index === currentIndex ? 'active' : ''}`}
            onClick={() => goToSlide(index)}
          />
        ))}
      </div>
    </div>
  );
}

CSS样式

为轮播组件添加基础样式，确保幻灯片切换时有平滑的过渡效果。

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

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}

.dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #bbb;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}

使用第三方库

如果需要更复杂的功能（如触摸滑动、无限循环），可以考虑使用现成的React轮播库，如react-slick或swiper。

安装react-slick：

npm install react-slick slick-carousel

示例代码：

import Slider from 'react-slick';

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

如何用react写轮播