当前位置：首页 > React

react实现轮播

2026-01-26 12:20:06React

React 实现轮播的几种方法

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

使用第三方库（react-slick）

安装 react-slick 库：

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 Carousel() {
  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 实现

自定义轮播组件的基本思路：

react实现轮播

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

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

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

  return (
    <div style={{ overflow: 'hidden', position: 'relative' }}>
      <div style={{ 
        display: 'flex',
        transform: `translateX(-${currentIndex * 100}%)`,
        transition: 'transform 0.5s ease-in-out'
      }}>
        {items.map((item, index) => (
          <div key={index} style={{ width: '100%', flexShrink: 0 }}>
            {item}
          </div>
        ))}
      </div>
    </div>
  );
}

使用 Swiper.js

安装 Swiper：

npm install swiper

Swiper 实现示例：

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

function SwiperCarousel() {
  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>
  );
}