1.swiper:HTML结构
<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>
2.样式
.swiper-container{ margin:0 auto; width:100px; height:200px; overflow: hidden; border:1px solid red; } .swiper-wrapper,.swiper-slide{ width:100px; height:200px; }
3.水平轮播
var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项,自动滑动 loop:true })
4.垂直轮播
var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项,自动滑动 direction : 'vertical',//控制滚动的方向,水平或垂直 loop:true })
5.左右切换事件
6.