当前位置：首页 > React

react 轮播图实现

2026-01-27 01:14:15React

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

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

export default SimpleSlider;

常用配置选项：

autoplay: 自动播放
arrows: 显示导航箭头
fade: 启用淡入淡出效果
responsive: 响应式断点配置

使用 Swiper 实现轮播图

Swiper 是功能强大的现代轮播库，React 版本为 swiper/react。

react 轮播图实现

安装依赖：

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

export default App;

高级功能：

react 轮播图实现

导航控制器
分页器
滚动条
缩略图
垂直滑动
3D效果

纯 CSS 实现简单轮播

对于简单需求，可以使用 CSS 动画实现基础轮播效果。

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

const Carousel = ({ children }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex(prev => (prev + 1) % React.Children.count(children));
    }, 3000);
    return () => clearInterval(interval);
  }, [children]);

  return (
    <div className="carousel">
      <div 
        className="carousel-inner"
        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
      >
        {React.Children.map(children, (child) => (
          <div className="carousel-item">{child}</div>
        ))}
      </div>
    </div>
  );
};

export default Carousel;

配套 CSS：

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

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

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