初始化

.swiper-container { width height .swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color .swiper-slide:nth-of-type(2){ background-color .swiper-slide:nth-of-type(3){ background-colorSlide 1Slide 2Slide 3, { direction: , // loop: true, // //, // //, prevButton: , // //, })

var mySwiper = new Swiper ('.swiper-container', { // 滑动方向 // horizontal水平 // vertical垂直 direction: 'horizontal', // 初始化时候slide的索引(从0开始) initialSlide: 1, // 手指松开至slide贴合的时间 speed:3000, // 设置自动播放的事件间隔 autoplay: 2000, // 可显示数量 slidesPerView:2, // 滑块居中 centeredSlides:true, })

触摸设置

var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', // 触摸距离与slide滑动距离的比率 touchRatio:0.1, // 无法滑动 onlyExternal:true, // 滑块跟随手指进行移动 followFinger:false, // 定义longSwipesMs longSwipesMs:1000, longSwipes:false, shortSwipes:false, longSwipesRatio:0.5, touchAngle:10, }) 禁止切换和前进后退 Slide 1Slide 2Slide 3prevnext, { direction: , noSwiping:true, noSwipingClass : , nextButton : , prevButton : , }) 分页器 .swiper-container { width height .swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color .swiper-slide:nth-of-type(2){ background-color .swiper-slide:nth-of-type(3){ background-color .swiper-pagination-bullet{ width height .swiper-pagination-bullet-active{ background-colorSlide 1Slide 2Slide 3, { direction: , pagination : , paginationType : , paginationType : , paginationType : , paginationClickable : true, paginationHide : true, paginationElement : , paginationBulletRender : function( swiper,index,classname ){ } }) 切换效果 , { direction: , effect : , effect : , effect : , effect : , effect : , }) 进程 Slide 1Slide 2Slide 3按钮, { direction: , }) btn.onclick = function(){ alert( mySwiper.progress ); alert( mySwiper.slides[0].progress ); console.log( mySwiper.slides[].progress ); } setInterval(function(){ console.log( mySwiper.slides[].progress ); },20)

常用属性和回调

Slide 1Slide 2Slide 3按钮, { direction: , speed : 2000, onSlideChangeStart : function(){ console.log( ); }, onSlideChangeEnd : function(){ console.log( ); } }) console.log( mySwiper.width ); console.log( mySwiper.height ); btn.onclick = function(){ console.log( mySwiper.translate ); console.log( mySwiper.activeIndex ); console.log( mySwiper.previousIndex ); }