Swiper是实现左右滑动翻页，自动轮播图不可或缺的组件库。

Swiper使用形式多样，官方给出的文档里大多是new Swiper()的使用方式。

今天给大家介绍另一种使用方式。

采用Swiper组件实现自动轮播图

就用一个最简单的轮播图作为示例。

1、安装swiper

package.json

{
    "devDependencies": {
        "swiper": "^6.1.2",
    }
}

npm install

2、使用swiper

导入：

import SwiperCore, {Navigation} from 'swiper';
import {Autoplay, Pagination} from 'swiper';
import {Swiper, SwiperSlide} from 'swiper/react';
import '../../css/swiper-bundle.css';

SwiperCore.use([Autoplay, Pagination, Navigation]);

swiper-bundle.css是自己拷贝到工程目录里的css文件，可到官方下载。

点此下载：swiper-bundle.css

使用：

        <Swiper
          loop={banner && banner.length > 1}
          spaceBetween={30}
          slidesPerView={1}
          pagination={{clickable: true}}
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
        >
          {banner.map((item: any) => {
            return <SwiperSlide key={item.id}>{bannerItem(item)}</SwiperSlide>;
          })}
        </Swiper>

字段解释：
loop={}：是否循环滑动（如果内部是复杂布局并且有多个点击按钮，建议关闭，开启会导致内部布局点击失效的问题。如果只是轮播图不影响）；
spaceBetween={30}：页面间间隔；
slidesPerView={1}：预览一个条目数；
pagination={{clickable: true}}：显示分页器（点点点），并可点击；

          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}

开启自动轮播，每隔3秒滚动一次，手指不操作时，自动继续滚动。
如果需要关闭轮播，传autoplay={false}