Как реализовать адаптив Slick Slider?

Question

[artur012097]

Есть страница, у укоторого при достижении какого то разрешерия нужно включить слайдер и обратно. Есть несколько проблем.
1. Задачу решил путем отслеживания разрешения экрана. Но, когда уже добавляется слайдер и код продолжает работать, прт каждом resize - е код пытается добавить сллайдер. И иэ-эа тогоб что слайдер уже инициализирован, викидывает ошибку. Как обойти этот момент или решать по другомую,
2. При работе кода для добавления слайдераб у одного из блоков изначально display: none; , и из-за этого тоже кидает ошибку в консоль и не добавляет слайдер. Как обойти этот момент?

Comments

[Rustam Bainazarov]

А где, собственно, код?

[iBird Rose]

первое решить можно с помощью:

$('.slider').not('.slick-initialized').slick(); //init

Answer 1

[Антон Литвиненко]

$(window).on('resize', function(e){
  // Переменная, по которой узнаем запущен слайдер или нет.
  var initLib = $('.library-slider').data('init-slider');

  if(window.innerWidth < 768){
    // Если слайдер не запущен
    if(initLib != 1){
      // Запускаем слайдер и записываем в data init-slider = 1
      $('.library-slider').slick({
        arrows: false,
        dots: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [
          {
            breakpoint: 576,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            }
          }
        ]
      }).data({'init-slider': 1});
    }
  }
  // Если десктоп
  else {
    // Если слайдер запущен
    if(initLib == 1){
      // Разрушаем слайдер и записываем в data init-slider = 0
      $('.library-slider').slick('unslick').data({'init-slider': 0});
    }
  }
}).trigger('resize')

Comments

[artur012097]

Так то спасибо, но такой код я тоже написал. Проблема в том, что есть два блока, одна из которых изначально скрыта. Когда скрипт работаетб о все корректно отработывает, но этому скрытому элементу (когда переключаюсь на него) слайдер не добавляется. Добавляется только при ресайзе и при этом удаляется у второго и все повторяется. Здесь самая большая проблема в том, что при вшоде на сайт с мобайла второй блок отсается без слайдера (по томуб что скрипт работает на ресайз). вот в чем проблемаю

[Антон Литвиненко]

artur012097, попробуйте скрыть элемент не через display: none

[artur012097]

Поменял Display: none на Visibility: hidden. Спасибо.

Answer 2

[ThunderCat]

прт каждом resize - е код пытается добавить сллайдер.

Для этого заводите глобальный флаг типа let sliderInited = false;, и при инициализации проверяете, ставите в тру и дальше уже не инициализируете.

у одного из блоков изначально display: none;

Если это из-за того что вы прятали слайдер, то поможет реинициализация: $('.slick').slick("refresh");

Comments

[iBird Rose]

у слика нет такой функции. у слика она $('.slick').slick('setPosition');

[ThunderCat]

iBird Rose, найдено на просторах SO и собственно тостера, и, как ни странно, работает в текущем проекте.