Перемещение точек скользящего слайдера - несколько позиций

Question

Я использую скользкий слайдер ( http://kenwheeler.github.io/slick/). Мне было интересно, возможно ли изменить положение скользких точек только для определенного скользящего слайдера (под слайдером я подразумеваю полный слайдер, а не изображение в слайдере. У меня есть 3 скользящих слайда на моей странице, просто хочу переместить их для один из них).

Я обнаружил, что скользящие точки пост- слайдера изменяют положение, и принятое решение прекрасно работает, если вы хотите переместить все свои точки (для всех ползунков вместе):

.slick-dots {
  top: 100px;  // play with the number of pixels to position it as you want
  left: 100px; // play with the number of pixels to position it as you want
}

Как изменить положение точек только для определенного слайдера? Класс.slick-dots, кажется, применяется ко всем ползункам, и исходный код находится в CDN.

Для ссылки на код, пожалуйста, обратитесь к этой скрипке https://jsfiddle.net/5ox31m2a/89/ (обратите внимание, что это всего лишь пример 1 ползунка, а не полное представление о проблеме под рукой).

заранее спасибо

Answer 1

Прежде всего, вы должны использовать более свежую версию плагина, текущая версия 1.8.1

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

Например,

$('.slider').on('afterChange',function(e, slick, currentSlide){
    slick.$dots.attr('data-current-slide', currentSlide);
});

Выше будет установлен атрибут с именем data-current-slide со значением, соответствующим текущему слайду. Теперь вы можете настроить таргетинг на CSS с помощью [data-current-slide="XX"] для стилизации.

Например, используя

.slick-dots[data-current-slide="3"]{
    bottom: -20px;
}

переместит точки под фотографиями, когда вы на слайде 3.
примечание: текущий слайд зависит от того, как вы используете slidesToScroll вариант

Посмотреть демо на https://jsfiddle.net/gaby/1hoztaay/