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！