醉近在做一个项目，要做一个响应式的网站的时候。

使用了SWIPERR插件来做图片左右滚动的图片，在PC端上显示一行四个。

但是切换到手机的时候，发现显示还是四个。非常别扭。图片变得很窄。

我们先来看一下原始代码：

  <div class="swiper-container">
    <div class="swiper-wrapper">
     
      <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
 <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
 <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
 <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
      <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
      <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
 <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
 <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
 <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
      <div class="swiper-slide" style="background: url(1.jpg) center;"></div>
      
    </div>
    
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    

  <!-- Initialize Swiper -->
  <script>

js部分：

 <script>
    var swiper = new Swiper('.swiper-container', {
      autoplay:true,
       autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },

      slidesPerView: 4,
      spaceBetween: 8,
      slidesPerGroup: 1,
      loop: true,
      loopFillGroupWithBlank: true,
      
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
      
            
      
  </script>

这是官方的标准代码。基本上就是这样了。但是出现以上冲突如何解决呢？

我想到的方案是PC端一段代码，手机端一段代码，在PC端上将手机部分隐藏，在手机上将PC端隐藏。分别给它不同的属性。醉后玩美解决了SWIPER在同一页面下使用多个不同的DEMO引起的冲突样式问题。

    
        
<div class="pc">
  <div class="swiper-container ">
    <div class="swiper-wrapper">
     {pboot:list scode=21 num=10}
      <div class="swiper-slide" style="background: url([list:ico]) center;"></div>
    {/pboot:list}
      
    </div>
    
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    
      <!-- Initialize Swiper -->
 
  </div>
 </div>
 <script>
    var swiper = new Swiper('.pc  .swiper-container', {
      autoplay:true,
       autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },

      slidesPerView: 4,
      spaceBetween: 8,
      slidesPerGroup: 1,
      loop: true,
      loopFillGroupWithBlank: true,
      
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
      
            
      
  </script>
  <div class="wap">
  <div class="swiper-container">
    <div class="swiper-wrapper">
     {pboot:list scode=21 num=10}
      <div class="swiper-slide" style="background: url([list:ico]) center;"></div>
    {/pboot:list}
      
    </div>
    
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    

  <!-- Initialize Swiper -->
  <script>
   
      
        var swiper = new Swiper('.wap .swiper-container', {
        autoplay:true,
        autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },

      slidesPerView: 1,
      spaceBetween: 1,
      slidesPerGroup: 1,
      loop: true,
      loopFillGroupWithBlank: true,
      
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
      
      
  </script>
        
  </div>
</div>