Question

我想在更大的屏幕上更改Flickity groupCells选项吗？

在移动设备上，Flickity一次显示一张幻灯片，这是我希望保留的内容。但是，当屏幕较大时，平板电脑及更高版本的平板电脑希望两个幻灯片并排出现。

我认为我应该可以通过使用if ( matchMedia来实现这一目标，但是没有成功。

灵活性选项

$(document).ready(function(){

  // SLIDER

  $('.story-carousel').flickity({
    freeScroll: true,
    wrapAround: true,
    contain: true,
    autoPlay: 8000,
    pageDots: false,
    arrowShape: { 
      x0: 10,
      x1: 60, y1: 50,
      x2: 60, y2: 0,
      x3: 60
    }
  });

  // Change when larger screen is loaded
  if ( matchMedia('screen and (min-width: 769px)').matches ) {
    groupCells = true;
  }

  // Change when larger screen is loaded
  if ( matchMedia('screen and (min-width: 769px)').matches ) {
    groupCells = 2;
  }


});

我也尝试过...

$(document).ready(function(){

  // SLIDER

  $('.story-carousel').flickity({
    // groupCells = true,
    // groupCells = 2,
    freeScroll: true,
    wrapAround: true,
    contain: true,
    autoPlay: 8000,
    pageDots: false,
    arrowShape: { 
      x0: 10,
      x1: 60, y1: 50,
      x2: 60, y2: 0,
      x3: 60
    }

  });

  // Flickity options, defaults
  var options = {
    groupCells: false,
    groupCells: 1,
  };

  // Change when larger screen is loaded
  if ( matchMedia('screen and (min-width: 768px)').matches ) {
    options.groupCells = true;
    options.groupCells = 2;
  }


  $('.gallery').flickity( options );

});

这是基于Desandro对GitHub的评论。但是，还是不成功？

我目前在台式机上看到...

但是想要这个……

Answer 1

设法通过以下代码使其工作：

$(window).on('resize', function(){

  // SLIDER

  $('.story-carousel').flickity({
    freeScroll: true,
    wrapAround: true,
    contain: true,
    autoPlay: 8000,
    pageDots: false,
    arrowShape: { 
      x0: 10,
      x1: 60, y1: 50,
      x2: 60, y2: 0,
      x3: 60
    }

  });

  // Default state
  if ( matchMedia('screen and (max-width: 768px)').matches ) {

    $('.story-carousel').flickity({
      groupCells: false,
      groupCells: 1,
    });

  }

  // // Change when larger screen is loaded
  if ( matchMedia('screen and (min-width: 769px)').matches ) {

    $('.story-carousel').flickity({
      groupCells: true,
      groupCells: 2,
    });

  }

});

显然，任何改进都是值得欢迎的

在较大的屏幕上更改Flickity groupCell选项

1 个答案: