(网页)swiper.js轮播图插件
Swiper4.x使用方法
1.首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下載Swiper文件或使用CDN。
<!DOCTYPE html> <html> <head>...<link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body>...<script src="path/to/swiper.min.js"></script> </body> </html>2.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> 導航等組件可以放在container之外3.你可能想要給Swiper定義一個大小，當然不要也行。
.swiper-container {width: 600px;height: 300px; }4.初始化Swiper：最好是挨著</body>標簽
<script> var mySwiper = new Swiper ('.swiper-container', {direction: 'vertical',loop: true,// 如果需要分頁器 pagination: {el: '.swiper-pagination',},// 如果需要前進后退按鈕 navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滾動條 scrollbar: {el: '.swiper-scrollbar',},}) </script> </body>如果不能寫在HTML內容的后面，則需要在頁面加載完成后再初始化。
<script type="text/javascript"> window.onload = function() {... } </script>或者這樣（Jquery和Zepto）
<script type="text/javascript"> $(document).ready(function () {... }) </script>5.完成。恭喜你，現在你的Swiper應該已經能正常切換了。
?
?
?swiper坑
1.一個頁面引用多個swiper插件，出現混亂問題；
解決方法： 1.實例化swiper時加上其父元素加以區分?
2.Swiper加上ID或Class區分，要保留默認的類名swiper-container
如下：?
<script>var swiper = new Swiper('.course_banner2 .swiper-container', {pagination: '.course_banner2 .swiper-pagination',paginationClickable: true,loop: true,autoplay: 2500});</script>2. swiper隱藏之后，再顯示，滑動不流暢，且無限滑動會失敗；
解決方法： 添加一下兩個屬性
observer: true,//修改swiper自己或子元素時，自動初始化swiper
observeParents: true,//修改swiper的父元素時，自動初始化swiper
3.動態生成的swiper，如append()，或html()添加的，無限滑動效果失敗；
解決方法：
a. 添加上面兩個屬性
b.把swiper方法寫在動態生成的方法里面
如下所示：
function bigPic(comment_id) {$('.win_pic').show();$.post("{:U('Course/ajaxComment')}", {'c_id':comment_id}, function(data){if(data.status == 1){$("#content").text(data.comment.c_content);$(".swiper-wrapper").html('');var html = '';var images = data.comment.images;for (var i=0; i < images.length; i ) {html = "<div class='swiper-slide'><img src=__ROOT__/" images[i]['thumb_image'] "></div>"; }$(".swiper-wrapper").html(html); //swiper已動態生成//實例化swipervar swiper = new Swiper('.nav .swiper-container', {pagination: '.nav .swiper-pagination',paginationClickable: true,centeredSlides: true,autoplay: false,autoplayDisableOnInteraction: false,paginationType: 'fraction',observer: true,//修改swiper自己或子元素時，自動初始化swiperobserveParents: true,//修改swiper的父元素時，自動初始化swiperloop: true,paginationFractionRender: function(swiper, currentClassName, totalClassName) {return '<span class="' currentClassName '"></span>' '/' '<span class="' totalClassName '"></span>';}})}console.log(data);}, "json");}?4.移動端使用swiper需加onTouchStart、onTouchEnd，下拉時輪播停止BUG。（針對 apicloud 開發)
var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',loop: true,paginationClickable: true,centeredSlides: true,autoplay: 2500,autoplayDisableOnInteraction: false,onTouchStart: function(swiper) {api.setFrameAttr({name: api.frameName,bounces: false});},onTouchEnd: function(swiper) {api.setFrameAttr({name: api.frameName,bounces: true});}});?
官網網址:http://www.swiper.com.cn/
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的(网页)swiper.js轮播图插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： (网页)css和js的版本号问题
- 下一篇： (网页)js每隔5分钟执行一次ajax请