Как изменить переключатели у слайдера «slick»?

Question

[Huo Yuhao]

Здравствуйте. Нашел этот слайдер, кое-как настроил его, но никак не получается изменить эти "цифры" под себя.
По задумке, вместо "1", должно быть написано условный "150-130" итп с другими, чтобы при этом конечно же они оставались работоспособными кнопками-переключателями.

И собственно вопрос, а как этого добиться? Это как-то можно реализовать?


Включаются эти "кнопки-цифры" кодом "dots: true" в скрипте, и они не имеют какого-то видимого фундамента в html'е, чтобы его можно было как-то изменить под свои нужды.
ссылка на slick

$(document).ready(function(){
$('.slider').slick({
   
rows: 3,
arrows: false,
dots:true,
adaptiveheight: true,
slidesToShow:5,
slidesToScroll: 5,
easing: 'easy',
waitForAnimate: false,
vertical:false,
  
 });
});

<div class="slider">
                <div class="img-block-1">
                        <img src="images/01.png" alt="">
                        <h4>140 Глава</h4>
                </div>
            </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./js/slick.min.js"></script>
    <script src="./js/scripts.js"></script>
</html>

.slick-dots {
    display:flex;
    justify-content: center;
    align-items: center;
    
}

.slick-dots li button {
    font-size: 2;
    margin-left: 40px;  
    cursor: pointer;
}

Comments

[Вадим]

1) этих точек не может не быть в разметке.
2) Вы можете сверстать любые кнопки какие хотите, а потом назначить им обработчик и воспользоваться методами слика как гласит документация в разделе Methods: slickGoTo.

Answer 1

[Huo Yuhao]

Решение:

});
document.querySelectorAll(".slick-dots li button").forEach((el, i) => el.textContent = `${1 + i * 15} - ${++i * 15}`);
});

Получил от пользователя Рони на другом сайте.