站長資訊網(wǎng)Swiper(Swiper master)是目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁觸摸內(nèi)容滑動(dòng)js插件,可以用來做輪播和滑動(dòng).
-
初始化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="swiper.css?1.1.11"/> <style> .swiper-container { width: 600px; height: 300px; } .swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color: cornflowerblue; } .swiper-slide:nth-of-type(2){ background-color: coral; } .swiper-slide:nth-of-type(3){ background-color: yellowgreen; } </style> </head> <body> <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> <!-- 如果需要導(dǎo)航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滾動(dòng)條 --> <div class="swiper-scrollbar"></div> </div> <!--導(dǎo)航等組件可以放在container之外--> <script src="swiper.js?1.1.11"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical',// loop: true,// // // 如果需要分頁器 pagination: '.swiper-pagination',// // // 如果需要前進(jìn)后退按鈕 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev',// // // 如果需要滾動(dòng)條 scrollbar: '.swiper-scrollbar', })</script> </body></html> -
基本配置
var mySwiper = new Swiper ('.swiper-container', { // 滑動(dòng)方向 // horizontal水平 // vertical垂直 direction: 'horizontal', // 初始化時(shí)候slide的索引(從0開始) initialSlide: 1, // 手指松開至slide貼合的時(shí)間 speed:3000, // 設(shè)置自動(dòng)播放的事件間隔 autoplay: 2000, // 可顯示數(shù)量 slidesPerView:2, // 滑塊居中 centeredSlides:true, }) -
觸摸設(shè)置
var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', // 觸摸距離與slide滑動(dòng)距離的比率 touchRatio:0.1, // 無法滑動(dòng) onlyExternal:true, // 滑塊跟隨手指進(jìn)行移動(dòng) followFinger:false, // 定義longSwipesMs longSwipesMs:1000, longSwipes:false, shortSwipes:false, longSwipesRatio:0.5, touchAngle:10, }) 禁止切換和前進(jìn)后退 <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide stop">Slide 1</div> <!--<div class="swiper-slide swiper-no-swiping">Slide 2</div>--> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <button class="prev">prev</button> <button class="next">next</button> <script src="swiper.js?1.1.11"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', noSwiping:true, noSwipingClass : "stop", nextButton : ".next", prevButton : ".prev", }) </script>分頁器 <style> .swiper-container { width: 600px; height: 300px; } .swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color: cornflowerblue; } .swiper-slide:nth-of-type(2){ background-color: coral; } .swiper-slide:nth-of-type(3){ background-color: yellowgreen; } .swiper-pagination-bullet{ width: 20px; height: 20px; } .swiper-pagination-bullet-active{ background-color: yellow; } </style> </head> <body> <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> <script src="swiper.js?1.1.11"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', pagination : ".swiper-pagination", paginationType : "bullets", paginationType : "fraction", paginationType : "progress", paginationClickable : true, paginationHide : true, paginationElement : "i", paginationBulletRender : function( swiper,index,classname ){ return "<span class='"+ classname +"'>"+ (index+1) +"</span>" } })</script> </body>切換效果 <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', effect : "slide", effect : "fade", effect : "cube", effect : "coverflow", effect : "flip", })</script>進(jìn)程<body> <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> <button id="btn">按鈕</button> <script src="swiper.js?1.1.11"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', }) btn.onclick = function(){ alert( mySwiper.progress ); alert( mySwiper.slides[0].progress ); console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress ); } setInterval(function(){ console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress ); },20)</script> </body> -
常用屬性和回調(diào)
<body> <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> <button id="btn">按鈕</button> <script src="swiper.js?1.1.11"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', speed : 2000, onSlideChangeStart : function(){ console.log( "開始滑動(dòng)" ); }, onSlideChangeEnd : function(){ console.log( "滑動(dòng)結(jié)束" ); } }) console.log( mySwiper.width ); console.log( mySwiper.height ); btn.onclick = function(){ console.log( mySwiper.translate ); console.log( mySwiper.activeIndex ); console.log( mySwiper.previousIndex ); } </script> </body>
