新闻中心 网络推广 网站建设 优化推广

swiper 4X插件在响应式下不同宽度显示不同个数

swiper 4X插件在响应式下不同宽度显示不同个数这个功能在我们日常的开发过程中应该经常需要用到。

而在这之前我也是使用了很多其他的方法 来实现,殊不知官方就给了对应的解决方案。

然后在百度上搜索了一下,发现别人提供的代码对于4X版本来均已经不能使用,所以自己写了一个在用的版本,保存下来提供给大家参考一下。

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

                // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable :true,
            },
            
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            
            //响应式个数,这里的尺寸大家可以自己添加无限多个。由于我在做这个DEMO的时候,正好这图片大小适用于下面的尺寸。
          
            breakpoints: {               
            //当宽度小于等于640时显示
              640: { 
                slidesPerView: 1,
                spaceBetween: 20
               },
            //当宽度小于等于768时显示
              768: {
                slidesPerView: 3,
                spaceBetween: 30
               },
            //当宽度小于等于992时显示
              992: {
                slidesPerView: 4,
                spaceBetween: 30
               }   
            }  

            });
</script>


留言

电话微信    15899750475

工作时间:8:30-12:00;13:30-17:00

微信和手机同号,欢迎加微信沟通!

电话

关注公众号

 
微信
Top