Question

我在這裏是新的，這是我的第一個問題。

我在一個簡單的頁面中有一些帶有輕觸庫的畫廊，當桌面每個畫廊每3秒滑動3張圖片時滑動，當res設置爲智能手機時，畫廊視口應該切換到每個點1張圖片。 因此，這裏是html代碼：

<div class="carousel flick" data-flickity='{ "cellAlign": "left", "contain": true, "groupCells": 3, "autoPlay": true, "wrapAround": true, "prevNextButtons": false }'></div> 

，你可以看到有一個名爲groupCells 3的對象，這意味着，該畫廊將切換每次3個單元，但如果我在智能手機的模式走，我需要要說到數據ATTR時最大寬度設置爲991px

所以這裏groupCells必須是1是我的查詢：

$(window).resize(function() { 
var viewportWidth = $(window).width(); 
if (viewportWidth < 991) { 
     $(".flick").data("flickity").groupCells === "1"; 
} 

}）;

當然，不會工作。

它有什麼問題？

感謝您的支持！

Answer 1

試試這個

$(window).resize(function() { 
    var viewportWidth = $(window).width(); 
    var json = $(".flick").data("flickity"); 
    if (viewportWidth < 991) { 
    json.groupCells = 1; 
    $(".flick").data("flickity" , json); 

    } else { 
    json.groupCells = 3; 
    $(".flick").data("flickity" , json); 
    } 
}); 

Answer 2

非常感謝TheBrutalX！ ：D我希望這會幫助別人esle！ 我直接與他交談，我們以另一種更好的方式解決了這個問題。 這第一篇文章完美的作品，但腳本應該寫在HTML的末尾才能正常工作。

然後，他在這裏的解決方案：

<div class="carousel flick"></div> 

jQuery來啓動畫廊和調整放置在HTML結束調整時才能正常工作：

var slider_setting = { 
      cellAlign: 'left', 
       contain: true, 
       groupCells: 3, 
       autoPlay: true, 
       wrapAround: true, 
       prevNextButtons: false 
     }; 
    $(document).ready(function(){ 
     $(".flick").each(function(){ 
      var viewportWidth = $(window).width() 
      if (viewportWidth < 991) { 
       slider_setting.groupCells = 1; 
      } else { 
       slider_setting.groupCells = 3; 
      } 
      $(this).flickity(slider_setting); 
     }); 
    }); 
    $(window).resize(function() { 
     var viewportWidth = $(window).width(); 
     if (viewportWidth < 991) { 
      slider_setting.groupCells = 1; 
     } else { 
      slider_setting.groupCells = 3; 
     } 
     $(".flick").each(function(){ 
      $(this).flickity('destroy'); 
      $(this).flickity(slider_setting); 
     }); 
    }); 

非常感謝您TheBrutalx！