swiper

swiper

1、pagination 分页器的使用
在图片下方添加

<div class="swiper-pagination"></div>

pagination : '.swiper-pagination'

2、loop 环路
会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
属性值 true false默认
3、autoplay
自动切换的时间间隔 毫秒

4、paginationClickable
点击分页器的指示点可以控制swiper的切换
属性值 true false
5、paginationType
设置分页器样式
‘bullets’ 圆点（默认）
‘fraction’ 分式
‘progress’ 进度条
‘custom’ 自定义

例：

		<section class="swiper-container swiper-container1" tabindex='3'>
				<div class="swiper-wrapper">
								。。。。。
				</div>
				<div class="swiper-pagination"></div>
			</section>

			<section class="swiper-container swiper-container2">
				<div class="swiper-wrapper">
				。。。。。。
				</div>
				<div v-show="show" class="swiper-pagination swiper-pagination2 swiper-pagination-fraction"></div>
			</section>

事件

	new Swiper('.swiper-container1', {
									loop: true,
									autoplay: 3000,
									pagination: '.swiper-container1 .swiper-pagination',
									paginationClickable: true
								})
								new Swiper('.swiper-container2', {
									pagination: '.swiper-container2 .swiper-pagination',
									paginationType: 'progress',
									slidesPerView: 5,       //设置slider容器能显示slider的数量   一个页面上有几列
									slidesPerColumn: 2,    //多行布局里面每列的slide数量。    一个页面上有几行
									slidesPerGroup: 5,  //slides的数量多少为一组。
								})