swiper插件如何react
安装 Swiper 依赖
在 React 项目中安装 Swiper 的核心库和 React 组件库：
npm install swiper react-id-swiper或者使用 yarn：
yarn add swiper react-id-swiper导入 Swiper 组件和样式
在 React 组件中导入 Swiper 和相关样式：
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper';
import 'swiper/swiper-bundle.min.css';
// 安装 Swiper 模块
SwiperCore.use([Navigation, Pagination, Scrollbar, Autoplay]);基本 Swiper 使用示例
创建一个简单的轮播组件：
function SimpleSwiper() {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
);
}配置自动播放
添加自动播放功能：
<Swiper
autoplay={{ delay: 3000 }}
loop={true}
>
{/* 幻灯片内容 */}
</Swiper>响应式断点配置
针对不同屏幕尺寸配置不同的显示方式：
<Swiper
breakpoints={{
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 4,
spaceBetween: 40,
},
1024: {
slidesPerView: 5,
spaceBetween: 50,
},
}}
>
{/* 幻灯片内容 */}
</Swiper>自定义导航按钮
添加自定义的前进后退按钮：
function CustomNavigationSwiper() {
const swiperRef = React.useRef(null);
return (
<div>
<Swiper
ref={swiperRef}
// 其他配置...
>
{/* 幻灯片内容 */}
</Swiper>
<button onClick={() => swiperRef.current.swiper.slidePrev()}>Previous</button>
<button onClick={() => swiperRef.current.swiper.slideNext()}>Next</button>
</div>
);
}垂直滑动模式
配置垂直方向的滑动：
<Swiper
direction="vertical"
slidesPerView={1}
mousewheel={true}
>
{/* 幻灯片内容 */}
</Swiper>懒加载图片
实现图片懒加载功能：
<Swiper
lazy={true}
preloadImages={false}
>
<SwiperSlide>
<img data-src="image1.jpg" className="swiper-lazy" />
<div className="swiper-lazy-preloader"></div>
</SwiperSlide>
{/* 更多幻灯片 */}
</Swiper>动态添加/删除幻灯片
处理动态内容变化：
function DynamicSwiper({ items }) {
return (
<Swiper>
{items.map((item, index) => (
<SwiperSlide key={index}>
{item.content}
</SwiperSlide>
))}
</Swiper>
);
}注意事项
确保正确导入 CSS 文件，否则 Swiper 的样式可能无法正常显示。如果遇到样式问题，可以尝试直接导入 Swiper 的 CSS：
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';对于更复杂的配置，参考 Swiper 官方文档获取所有可用参数和事件。
