Ещё одна пара dots в слик слайдере

Question

Мой JQ для вывода первых dots

$('.slider__doc').slick({
      
        dots: true,
        dotsClass: "my-dots__two",
        
    })

Хочу добавить ещё одну пару точек с таким же функционалом как у первых, но чтобы отображались сверху. То есть чтобы они работали одинаково. Как это сделать?

Answer 1

В документации есть опция которая добавит стандартный dots в любой элемент указанный в значении appendDots, т.е. элементов может быть много, в разных местах, Slick вставит свои dots в эти элементы и даст возможность управлять слайдами через них.

Но при этом не работает отображение активного слайда на dots, либо я уже забыл как пользоваться этим слайдером.. Но я решил эту проблему.

let slider = $('.your-class');
let dots = $('.your-dots');

slider.slick({
  dots: true,
  infinite: true,
  speed: 500,
  cssEase: 'linear',
  appendDots: dots
})

dots.each(function() {
  $(this).find('li').eq(slider.slick('slickCurrentSlide')).addClass('active');
});

slider.on('beforeChange afterChange', function(e, slick, dir) {
  if(e.type === 'beforeChange') {
    dots.each(function() {
      $(this).find('li').eq(dir).removeClass('active');
    });
  } else {
    dots.each(function() {
      $(this).find('li').eq(dir).addClass('active');
    });
  }
});

.your-class {
  margin: 10px 0;
}

.slick-dots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slick-dots li {
  display: block;
  min-width: 16px;
  width: 16px;
  height: 16px;
}

.slick-dots li:not(:last-child) {
  margin-right: 5px;
}

.slick-dots button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid gray;
  background: transparent;
  font-size: 0;
  cursor: pointer;
}

.slick-dots li.active button::before {
  content: '';
  display: block;
  min-width: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="your-dots"></div>
<div class="your-class">
  <div>
    <img src="//via.placeholder.com/350x150?text=1">
  </div>
  <div>
    <img src="//via.placeholder.com/350x150?text=2">
  </div>
  <div>
    <img src="//via.placeholder.com/350x150?text=3">
  </div>
</div>
<div class="your-dots"></div>

БЛОГ НА HUSL

Ещё одна пара dots в слик слайдере

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