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

醉近在做一個項目，要做一個響應式的網站的時候。

使用了SWIPERR插件來做圖片左右滾動的圖片，在PC端上顯示一行四個。

但是切換到手機的時候，發(fā)現(xiàn)顯示還是四個。非常別扭。圖片變得很窄。

我們先來看一下原始代碼：

  <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>

這是官方的標準代碼。基本上就是這樣了。但是出現(xiàn)以上沖突如何解決呢？

我想到的方案是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>