Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Несколько slick slider и data-slick (https://javascript.ru/forum/misc/85322-neskolko-slick-slider-i-data-slick.html)

Volonter 25.06.2023 13:03

Несколько slick slider и data-slick
 
Все привет, на странице несколько слайдеров, инициализирую их через
$( ".slider--js" ).each(function(index) {

Вопрос в том, что у каждого слайдера разные настройки, для одиночного слайдера можно использовать конструкцию (в html коде слоя со слайдером) вида
<div class="row align-items-center justify-content-between slider-for-js"
            data-slick='{"responsive": [{"breakpoint": 1024,"settings": {"slidesToShow": 2,slidesToScroll:2}},{"breakpoint": 768,"settings": {"slidesToShow": 2,slidesToScroll:2}},{"breakpoint": 480,"settings": {"slidesToShow": 1,slidesToScroll:1}}]}'
            ></div>


Но когда слайдеров несколько это не работает. Как быть, подскажите пожалуйста.
Заранее благодарю!

Volonter 25.06.2023 13:10

Цитата:

Сообщение от Rise (Сообщение 552504)
Volonter,
Если есть настройки data-slick, то не нужно инициализировать скриптом.

Всмысле, вот это не нужно?
$('.slider-for-js', $(this)).slick({})

Rise 25.06.2023 13:32

Цитата:

Сообщение от Volonter
Всмысле, вот это не нужно?

В доках написано что надо. Что нетипично. Попробуй тогда так: $('[data-slick]').slick()

Volonter 25.06.2023 15:34

Цитата:

Сообщение от Rise (Сообщение 552506)
В доках написано что надо. Что нетипично. Попробуй тогда так: $('[data-slick]').slick()

Неа, не работает. Вернее работает, но без настроек. А доки по слайдеру либо я плохо ищу, либо то что нашел не дает ответа.

Volonter 25.06.2023 15:48

Убрал все настройки, в итоге:
пока вот так
data-slick='{"dots": false, "slidesToShow": 2, "slidesToScroll":1

работает, когда добавляю настройки адаптивости - не работает
, "responsive":[{"breakpoint": 480,"settings": {"slidesToShow": 1,slidesToScroll:1}}]

Но при этом же вроде все верно написано?

рони 25.06.2023 16:55

Цитата:

Сообщение от Volonter
Но при этом же вроде все верно написано?

смотрите что у вас не так...
<div class="row align-items-center justify-content-between slider-for-js"
            data-slick='{"responsive":[{"breakpoint":1024,"settings":{"slidesToShow":2,"slidesToScroll":2}},{"breakpoint":768,"settings":{"slidesToShow":2,"slidesToScroll":2}},{"breakpoint":480,"settings":{"slidesToShow":1,"slidesToScroll":1}}]}'
            ></div>
    <div class="row align-items-center justify-content-between slider-for-js" data-slick='{"dots":false,"slidesToShow":2,"slidesToScroll":1,"responsive":[{"breakpoint":480,"settings":{"slidesToShow":1,"slidesToScroll":1}}]}'></div>


в помощь https://learn.javascript.ru/json

рони 25.06.2023 16:59

Цитата:

Сообщение от Volonter
Но при этом же вроде все верно написано?

все ключи должны быть в кавычках
Цитата:

Сообщение от Volonter
slidesToScroll:1

используйте
Цитата:

JSON.stringify для преобразования объектов в JSON.

Volonter 25.06.2023 17:20

рони,
Rise,
Спасибо парни! Заработало с вашими подсказками!


Часовой пояс GMT +3, время: 20:38.