Swiper Carousel：如何爲不同的屏幕尺寸給同一個旋轉木馬不同的屬性

Question

我正在嘗試創建一個旋轉木馬，在桌面上有4x1佈局，在移動設備上有2x2佈局。

這是代碼，但它只是打破了我的旋轉木馬。

var swiper1; 
$(window).resize(function() { 
    var ww = $(window).width(); 

    if (ww <= 767) { 
     swiper1 = new Swiper('#swiper2', { 

       slidesPerView: 2, 
       slidesPerColumn: 2, 
       spaceBetween: 10 
      } 
     ); 
    } 
    else { 
     swiper1 = new Swiper('#swiper2', { 

       slidesPerView: 4, 
       slidesPerColumn: 1, 
       spaceBetween: 30 
      } 
     ); 
    } 
}); 

最初的代碼本來只是簡單：

var swiper1 = new Swiper('#swiper2', { 
       slidesPerView: 4, 
       slidesPerColumn: 1, 
       spaceBetween: 30 
}); 

這是什麼爲我工作，但我想它更改爲2×2時分辨率爲< = 767

Answer 1

你必須在創建一個新的Swiper之前銷燬你的舊Swiper實例。在Swiper API Docs中，Methods部分有關於Swiper的銷燬方法的信息。在你的情況下，你會想這樣調用它：swiper1.destroy(true, true);。

你更新的JavaScript看起來是這樣的：

$(function() { 
     createSwiper(); 

     $(window).resize(function() { 
      createSwiper() 
     }); 
    }); 

    function createSwiper() { 
     var swiper1 = $('#swiper2')[0].swiper; 
     if (typeof swiper1 !== 'undefined') 
      swiper1.destroy(true, true); //if swiper exists, destroy it so we can create a new one 

     var ww = $(window).width(); 
     if (ww <= 767) { 
      swiper1 = new Swiper('#swiper2', { 
       slidesPerView: 2, 
       slidesPerColumn: 2, 
       spaceBetween: 10 
      }); 
     } else { 
      swiper1 = new Swiper('#swiper2', { 
       slidesPerView: 4, 
       slidesPerColumn: 1, 
       spaceBetween: 30 
      }); 
     } 
    } 

我把自己的功能創建刷卡邏輯，並調用它在頁面加載，並將其附加到窗口調整大小事件。

這是一個Fiddle，所以你可以看到它的行動（調整框架窗口）。