0

我是新来的，这是我的第一个问题。

我在一个简单的页面中有一些带有 flickity 库的画廊，什么时候桌面每个画廊每 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 说 groupCells 在最大宽度为 1 时必须为 1设置为 991 像素

所以这是我的查询：

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

});

当然，行不通。

它出什么问题了？

感谢你的支持！

4

2 回答 2

0

尝试这个

$(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);
  }
});
于 2017-08-09T10:33:26.877 回答
0

非常感谢 TheBrutalX ！:DI 希望这对某人有帮助！！我直接与他交谈，我们以另一种更好的方式解决了这个问题。这第一篇文章完美地工作，但脚本应该写在 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！

于 2017-08-09T12:28:03.360 回答