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

Question

[Рома]

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

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

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

<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>

javascript code 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>'
  });
});

Как у меня сейчас получилось:

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

Comments

[Михаил]

с каких это пор пагинация это слайдер?

[Рома]

Михаил, Зачем придираться к словам? Будем считать, что в нашем случае пагинация - слайды, в каждом из которых по 15 картинок. Не правильное слово подобрал, но по коду ведь ясно, что я имел ввиду

[Михаил]

Рома, гуглится
А arrows пихните каждую в DOM и прописывайте через селектор prevArrow: $('.js-prev')