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>
