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>