swiper基本使用

参数名	类型	是否必填	描述
swiperContainer	HTMLElement or string	必选	Swiper容器的css选择器，例如".swiper-container"
parameters	object	可选	Swiper的个性化配置

一个页面中引用多个Swiper，可以给每个容器加上ID或Class区分，要保留默认的类名swiper-container。
HTML

<div class="swiper-container" id="swiper1">....<div>
<div class="swiper-container" id="swiper2">....<div>
<div class="swiper-container" id="swiper3">....<div>

JS

var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');
var swiper3 = new Swiper('#swiper3');

关键字

使用方法示例

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
    autoplay: true,//可选选项，自动滑动
　　initialSlide :2,//默认位置
　　direction : 'vertical',//横向   vertical：竖向切换
　　speed:300,//动画完成时间  autoplay : { delay:3000 },//切换一次动画时间
　　grabCursor : true,//鼠标移上变成小手
　　

})
</script>