react 使用swiper 横向无限滚动

安装：

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

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

1. 新的使用方式

注意：安装此版本 npm install [email protected]，否则会报错找不到 swiper/react

import { Swiper, SwiperSlide } from 'swiper/react';

2. 基础代码

  {[1,2,3,4,5,6,7,8,9,10].map((item, index) => (
      Slide {item}
   ))}

---

处理点

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



  ...