亚洲青青视频一区|8MAV在线观看|天天看AV天天看|中日成人手机在线|欧美激情五区六区|亚洲婷婷天堂级片|亚洲天堂网7777|欧美日韩其他另类|手机在线成人AV|成人性大片一区二区三区四区五区

swiper 4X插件在響應(yīng)式下不同寬度顯示不同個(gè)數(shù)這個(gè)功能在我們?nèi)粘５拈_(kāi)發(fā)過(guò)程中應(yīng)該經(jīng)常需要用到。

而在這之前我也是使用了很多其他的方法 來(lái)實(shí)現(xiàn)，殊不知官方就給了對(duì)應(yīng)的解決方案。

然后在百度上搜索了一下，發(fā)現(xiàn)別人提供的代碼對(duì)于4X版本來(lái)均已經(jīng)不能使用，所以自己寫(xiě)了一個(gè)在用的版本，保存下來(lái)提供給大家參考一下。

<script>
  var swiper = new Swiper('.swiper-container', {
              slidesPerView: 4,
              spaceBetween: 30,
              loop: true,
               autoplay:true,
                speed: 500,

                // 如果需要分頁(yè)器
            pagination: {
              el: '.swiper-pagination',
              clickable :true,
            },
            
            // 如果需要前進(jìn)后退按鈕
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            
            //響應(yīng)式個(gè)數(shù)，這里的尺寸大家可以自己添加無(wú)限多個(gè)。由于我在做這個(gè)DEMO的時(shí)候，正好這圖片大小適用于下面的尺寸。
          
            breakpoints: {               
            //當(dāng)寬度小于等于640時(shí)顯示
              640: { 
                slidesPerView: 1,
                spaceBetween: 20
               },
            //當(dāng)寬度小于等于768時(shí)顯示
              768: {
                slidesPerView: 3,
                spaceBetween: 30
               },
            //當(dāng)寬度小于等于992時(shí)顯示
              992: {
                slidesPerView: 4,
                spaceBetween: 30
               }   
            }  

            });
</script>