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}
死数据可以。动态绑定就不行了