Несколько slick slider и data-slick

[Volonter]

Все привет, на странице несколько слайдеров, инициализирую их через

$( ".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]

Volonter,
Если есть настройки data-slick, то не нужно инициализировать скриптом.

Всмысле, вот это не нужно?

$('.slider-for-js', $(this)).slick({})

[Rise]

Всмысле, вот это не нужно?

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

[Volonter]

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

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

[Volonter]

Убрал все настройки, в итоге:
пока вот так

data-slick='{"dots": false, "slidesToShow": 2, "slidesToScroll":1

работает, когда добавляю настройки адаптивости - не работает

, "responsive":[{"breakpoint": 480,"settings": {"slidesToShow": 1,slidesToScroll:1}}]

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

[рони]

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

смотрите что у вас не так...

<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

[Rise]

Volonter,
Там json-формат - у всех свойств должны быть двойные кавычки, а у тебя slidesToScroll без них.

[рони]

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

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

slidesToScroll:1

используйте

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

[Volonter]

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