Как уменьшить количество слайдов в слайдере при изменений ширины, используя resizeObserver?

Question

У меня есть слайдер. Изначально в нем отображается по 4 слайда. Нужно, чтобы при ширине меньшей 1200 пикселей, количество слайдов уменьшалось вдвое. Я написал код с использованием resizeObserver, но у меня при любой ширине экрана отображается только 2 слайда. Можете подсказать где ошибка?

slider

<ul class="slider">
        <li class="slider__item">
          <img class="slider__item-img" src="img/slider-1.png" alt="">
          <p class="slider__item-name">Дмитрий Гутенберг</p>
          <p class="slider__item-description">Эксперт (ну, почти) по всем вопросам (почти)</p>
        </li>
        <li class="slider__item">
          <img class="slider__item-img" src="img/slider-2.png" alt="">
          <p class="slider__item-name">Анна Васильева</p>
          <p class="slider__item-description">Как я здесь оказалась? А главное — зачем?</p>
        </li>
        <li class="slider__item">
          <img class="slider__item-img" src="img/slider-3.png" alt="">
          <p class="slider__item-name">Пётр Дмитриевский</p>
          <p class="slider__item-description">Господа! Внимание! Благодарю за внимание!</p>
        </li>
        <li class="slider__item">
          <img class="slider__item-img" src="img/slider-4.png" alt="">
          <p class="slider__item-name">Татьяна Флеганова</p>
          <p class="slider__item-description">Одна я в пальто стою красивая, а вокруг…</p>
        </li>
        <li class="slider__item">
          <img class="slider__item-img" src="img/slider-5.png" alt="">
          <p class="slider__item-name">Фёдор Прокопьев</p>
          <p class="slider__item-description">Привет! Я фотограф, музыкант, ведущий</p>
        </li>
        <li class="slider__item">
          <img class="slider__item-img" src="img/slider-6.png" alt="">
          <p class="slider__item-name">Светлана Кортнева</p>
          <p class="slider__item-description">Художник-оформитель. Оформляю</p>
        </li>
      </ul>

js

const observer = new ResizeObserver((entries) => {
    for (const entry of entries) {
        const width = entry.contentRect.width;
        if (width < 1200) {
            $('.slider').slick({
                infinite: true,
                slidesToShow: 2,
                slidesToScroll: 1,
            });
        }
        else {
            $('.slider').slick({
                infinitetrue,
                slidesToShow: 4,
                slidesToScroll: 1
            })
        }
    }
});

observer.observe(document.querySelector('.slider'));

Answer 1

Основная проблема в том, что вы не делаете $('.slider').slick('unslick'); дабы убрать прошлый слайдер и пытетесь повесить новый поверх старого.

Так же проблема есть в том, что вы пытаетесь пересоздать слайдер при любом изменении размера, даже если вам это не нужно.

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    let new_size = entry.contentRect.width < 1200 ? 2 : 4;

    // нужно ли вообще обновить слайдер
    if (entry.target._slider_prev_size !== new_size) {
      // нужно ли убрать старый
      if (entry.target._slider_prev_size !== undefined)
        $(".slider").slick("unslick");

      entry.target._slider_prev_size = new_size;

      $(".slider").slick({
        infinite: true, // во втором if, тут кстати была опечатка
        slidesToShow: new_size,
        slidesToScroll: 1
      });
    }
  }
});

observer.observe(document.querySelector('.slider'));

при любой ширине экрана

Я не уверен на счёт того стоит ли вам вешать это всё в ResizeObserver. В большинстве случаев размер экрана не меняется, соответсвенно достаточно один раз взять размер блока и отрисовать с нужным размером.

let $slider = $('.slider');

$slider.slick({
    infinitetrue, 
    slidesToShow: $slider.width() < 1200 ? 2 : 4,
    slidesToScroll: 1
})

БЛОГ НА HUSL

Как уменьшить количество слайдов в слайдере при изменений ширины, используя resizeObserver?

Ответы (1 шт):