安装:
注意:@types/swiper - npm 已废弃
1. 新的使用方式
注意:安装此版本 npm install swiper@6.8.4,否则会报错找不到 swiper/react
import { Swiper, SwiperSlide } from 'swiper/react';
2. 基础代码
<Swiper
className="mySwiper"
autoplay={{
delay: 100,
disableOnInteraction: false, // 不设置只会轮播一次
pauseOnMouseEnter: true, // 鼠标移入暂停
}}
speed={10000} // 是速度
loop={true} // 无限循环
slidesPerView={12} // 复制个数
centeredSlides={true}
grabCursor={true} 拖动鼠标抓手状态
>
{[1,2,3,4,5,6,7,8,9,10].map((item, index) => (
<SwiperSlide key={index}>Slide {item}</SwiperSlide>
))}
</Swiper>
处理点
1. 样式引入失败
改为这样:
// eslint-disable-next-line
import 'swiper/swiper-bundle.css';
2. 无法自动播放
须在开始前文件引入使用Autoplay
引入:import SwiperCore, { Autoplay } from 'swiper';
使用:SwiperCore.use([Autoplay]);
3. 每次滑动一次后都会停顿一下,处理
对swiper本身的css样式进行修改, autoplay.delay 设为0(延迟时间,默认 3000)
.swiper-wrapper {
transition-timing-function: linear !important;
}
<Swiper
...
autoplay={{
...,
delay: 0
}}
>
...
</Swiper>