Добрый день.
Есть обычный слайдер slick.
Нужно чтобы при переключении слайдов менялся текст на кнопках, тоесть чтобы при появлении слайда, на стрелочке текст менялся на название следующего слайда.
Попробовал отследить slick-current на слайде. Но не работает при перелистывании. Пробовал реализовать чтобы при нажатии на стрелочки менялся текст, получилось, но нужно чтобы и при свайпе менялся текст.
Код который менял текст при нажатии на кнопки. (Этот код при свайпе не работает).
if ($('.index2').hasClass("slick-current")) {
$('.btn-prev span').text('Главная');
$('.btn-next span').text('ПОКУПАТЕЛЯМ');
}
Код слайдера
$('.index-slider').slick({
fade: true,
slidesToShow: 1,
arrows: true,
speed: 500
});
Слайдер:
<div class="index-slider">
<div class="index__item index1">
<div class="index__item-img">
<img src="img/slide1.jpg" alt="">
</div>
</div>
<div class="index__item index2">
<div class="index__item-img">
<img src="img/slide2.jpg" alt="">
</div>
</div>
<div class="index__item index3">
<div class="index__item-img">
<img src="img/slide3.jpg" alt="">
</div>
</div>
<div class="index__item index4">
<div class="index__item-img">
<img src="img/slide3.jpg" alt="">
</div>
</div>
<div class="index__item index5">
<div class="index__item-img">
<img src="img/slide3.jpg" alt="">
</div>
</div>
<div class="index__item index6">
<div class="index__item-img">
<img src="img/slide3.jpg" alt="">
</div>
</div>
<div class="index__item index7">
<div class="index__item-img">
<img src="img/slide3.jpg" alt="">
</div>
</div>
</div>