Как сделать двойную пагинацию в slick slider?

Question

Нужно сделать двойную пагинацию сверху и снизу с помощью slick slider

Как должно это выглядеть? Вот так:

Сейчас я сделал вот такой код. Но Верхняя стрелочка у меня не работает сейчас, нижняя пагинация работает, но не указывается активный слайд, как сверху.

$(document).ready(function(){
  $('.gallery-left').slick({
    slidesToShow: 1,
    draggable: false,
    swipe: false,
    arrows: true,
    dots: true,
    appendDots: $('.gallery-dots'),
    dotsClass: 'gallery-dots-item',
    appendArrows: $('.gallery-arrows'),
    prevArrow: '<button id="prev" type="button" class="btn btn-juliet">Следующие</button>',
    nextArrow: '<button type="button" class="btn next btn-juliet">Следующие</button>'
  });
});

.gallery-left-over {
  padding: 40px 30px;
  width: 470px;
  position: relative;
  border-right: 1px solid #B2B2B2;
}
.gallery-left {
  height: 100%;
  width: 100%;
  position: relative;
}
.gallery-left .slick-slide {
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  outline: none;
}
.gallery-left img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin: 8px;
  cursor: pointer;
}
.gallery-dots-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery-pagination {
  display: flex;
}
.gallery-pagination:first-child {
  position: absolute;
  top: 0px;
  left: 35px;
}
.gallery-pagination:last-child {
  position: absolute;
  bottom: 0px;
  left: 35px;
}
#prev {
  display: none !important;
}
.gallery-dots-item button {
  border: 1px solid #043652;
  outline: none;
  cursor: pointer;
  color: #043652;
  font-size: 20px;
  font-weight: 900;
  padding: 1px 8px;
  margin: 0 2px;
  background: transparent;
  transition: 0.3s all;
}
.gallery-dots-item button:hover {
  color: #fff;
  background: #CE6119;
}
.gallery-dots-item li.slick-active button {
  color: #fff;
  background: #CE6119;
  border: none;
}
.slick-dotted.slick-slider {
  margin-bottom: 0px !important;
}

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-left-over">
      <div class="gallery-pagination">
        <div class="gallery-dots"></div>
        <div class="gallery-arrows"></div>
      </div>
      <div class="gallery-left">
        <div>
          <img class="hello" src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img class="hello" src="img/oberezhnie-zagovori-dlya-blagopoluchiya-semi.2268.orig.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
        </div>
        
        <div>
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
        </div>
        <div>
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
          <img src="img/DuX1nN7W4AAHrIv.jpg" alt="gallery">
        </div>
      </div> <!-- gallery-left -->
      <div class="gallery-pagination">
        <div class="gallery-dots"></div>
        <div class="gallery-arrows"></div>
      </div>
    </div>

Как у меня сейчас получилось: Верхняя стрелочка у меня не работает сейчас, нижняя пагинация работает, но не указывается активный слайд, как сверху

БЛОГ НА HUSL

Как сделать двойную пагинацию в slick slider?

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