react 使用swiper 横向无限滚动_react swiper typescript 自动滚动

安装：

注意：@types/swiper - npm 已废弃

中文官网： Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

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>