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

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

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

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

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

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

            });
</script>