(網頁)swiper.js輪播圖插件

時間 2019-12-01

原文原文鏈接

Swiper4.x使用方法

1.首先加載插件，須要用到的文件有swiper.min.js和swiper.min.css文件。可下載Swiper文件或使用CDN。javascript

<!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內容。css

<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定義一個大小，固然不要也行。html

.swiper-container {
    width: 600px;
    height: 300px;
}

4.初始化Swiper：最好是挨着</body>標籤java

<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內容的後面，則須要在頁面加載完成後再初始化。ajax

<script type="text/javascript">
window.onload = function() {
  ...
}
</script>

或者這樣（Jquery和Zepto）json

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

5.完成。恭喜你，如今你的Swiper應該已經能正常切換了。api

swiper坑app

1.一個頁面引用多個swiper插件，出現混亂問題；ide

　　解決方法： 1.實例化swiper時加上其父元素加以區分 oop

　　　　　　　 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已動態生成
                //實例化swiper
                var swiper = new Swiper('.nav .swiper-container', {
                    pagination: '.nav .swiper-pagination',
                    paginationClickable: true,
                    centeredSlides: true,
                    autoplay: false,
                    autoplayDisableOnInteraction: false,
                    paginationType: 'fraction',
                    observer: true,//修改swiper本身或子元素時，自動初始化swiper
                    observeParents: true,//修改swiper的父元素時，自動初始化swiper
                    loop: 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/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。