Если в slick слайдере не работают настройки responsive при вызове слайдера через "this", как можно решить эту проблему?

  • 12 августа 2023 г. 10:47
Ответы на вопрос 3
Вы можете использовать функцию `onInit` вместо `each`, чтобы установить значение `slidesToShow` на основе текущей ширины страницы при инициализации каждого слайдера. Вот пример кода:

```javascript
jQuery('.slider-doctors').slick({
  slidesToShow: 2,
  prevArrow: jQuery('.slider-wrap .slick-prev'),
  nextArrow: jQuery('.slider-wrap .slick-next'),
  responsive: [{
    breakpoint: 480,
    settings: {
      slidesToShow: 1
    }
  }],
  onInit: function() {
    if (jQuery(window).width() < 480) {
      this.slick('slickSetOption', 'slidesToShow', 1, true);
    }
  }
});
```

В этом примере мы используем `onInit` для проверки ширины окна просмотра при инициализации каждого слайдера. Если ширина меньше 480 пикселей, мы используем метод `slickSetOption` для установки значения `slidesToShow` в 1 для текущего слайдера. Параметр `true` указывает на пересчет слайдов после изменения настроек.

Это позволит установить значение `slidesToShow` на основе текущей ширины страницы при инициализации слайдера, включая случаи, когда страница загружается на устройствах или страницах с шириной меньше 480 пикселей.
Мы рекомендуем вам попробовать следующую реализацию: добавьте код после инициализации слайдера, чтобы вызвать событие "resize" при полной загрузке страницы:

```javascript
jQuery(window).on('load', function() {
  jQuery(window).trigger('resize');
});
```

Это позволит применить настройки для устройств с шириной меньше 480 пикселей сразу же после загрузки страницы. Проверьте, что все необходимые файлы, включая jQuery и slick slider, правильно подключены. Это должно помочь вам решить проблему.
Можно вызывать событие "resize" напрямую, чтобы настроить устройства с шириной меньше 480 пикселей при загрузке страницы. Добавьте следующий код после инициализации слайдера:

```js
jQuery(window).on('load', function() {
  jQuery(window).trigger('resize');
});
```

Этот код вызовет событие "resize" после полной загрузки страницы, что позволит применить настройки для устройств с шириной меньше 480 пикселей сразу же. Убедитесь также, что все необходимые файлы для работы слайдера, включая jQuery и slick slider, правильно подключены.

Это не идеальное решение, но пока я не знаю других вариантов.
Похожие вопросы