Jquery, как заменить объект данных на max-width ( flickity)

Question

Я новичок здесь, и это мой первый вопрос.

У меня есть несколько галерей с библиотекой 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 ячейки за раз, но если я перехожу в режим смартфона, мне нужно сказать атрибуту данных, что groupCells должен быть равен 1, когда максимальная ширина равна установить на 991px

Итак, вот мой запрос:

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

});

Конечно, не сработает.

Что с этим не так?

Спасибо за вашу поддержку!

Answer 1

Большое спасибо 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!

Answer 2

Попробуй это

$(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);
  }
});