Swiper 用法

部分常用API

ininialSlide: 2, //起始图片切换的索引位置（起始从0开始，默认为0）

autoplay: 3000, //设置自动切换时间，单位毫秒

speed: 1000, //设置滑动速度

continuous: true, //无限循环的图片切换效果

disableScroll: true, //阻止由于触摸而滚动屏幕

stopPropagation: false, //停止滑动事件

paginationClickable: true, // 点击分页器的指示点分页器会控制Swiper切换

grabCursor: true, // 鼠标指针变成手的形状

 

 

Swiper使用方法

　　首先需要加载swiper.js/swiper.min.js和swiper.css/swiper.min.css（可以不用提前加载jQuery），如果已经加载了jQuery也可以选择加载swiper.jquery.min.js。（js文

件最好在body尾部引入）。

HTML部分的内容

<div class="swiper-container">

　　<div class="swiper-wrapper">

　　　　<div class="swiper-slide">Slide 1</div>

　　　　<div class="swiper-slide">Slide 2</div>

　　　　<div class="swiper-slide">Slide 3</div>

　　</div>

　　<!-- 如果需要分页器 -->

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

　　<!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div>

　　<div class="swiper-button-next"></div>

　　<!-- 如果需要滚动条 -->

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

</div>

 

JS部分内容

<script>

　　var mySwiper = new Swiper ('.swiper-container', {

　　　　direction: 'vertical',

　　　　loop: true,

　　　　// 如果需要分页器

　　　　pagination: '.swiper-pagination',

　　　　// 如果需要前进后退按钮

　　　　nextButton: '.swiper-button-next',

　　　　prevButton: '.swiper-button-prev',

　　　　// 如果需要滚动条

　　　　scrollbar: '.swiper-scrollbar',

　　})

</script>