Question

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

我在一个简单的页面中有一些带有flickity库的画廊，桌面上每个画廊每3秒有3个图片滑动，当res设置为智能手机时，画廊视口应该切换到每个点1个图片。所以这是html代码：

func insertImage() {
    let theImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 300))
    theImageView.image = #imageLiteral(resourceName: "coolimage")
    theImageView.contentMode = UIViewContentMode.scaleAspectFill
    view.addSubview(theImageView)
}

你可以看到有一个名为groupCells 3的对象，这意味着画廊每次都会切换3个单元格，但如果我进入智能手机模式，我需要对数据attr说groupCells必须为1时最大宽度设置为991px

所以这是我的问题：

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

}）;

当然，不行。

它出了什么问题？

感谢您的支持！

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我希望这会帮助一个人！我直接与他交谈，我们以另一种更好的方式解决了这个问题。第一篇文章完美无缺，但脚本应该在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！

Jquery如何在max-width（flickity）上替换数据对象

2 个答案: