currently my slider shows total slide count as number of dots, I also want to show current active dot number, currently it is showing number of active slide here is my code
var $status = $('.sliderQty');
var $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
// --------- this i value is current slide. i need that to be current active dot
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text(i + '/' + (slick.$dots[0].children.length));
});
$('.myslider').slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});
any possible solutions?
Maybe you can simply grab the active dot text:
$('.slick-dots .slick-active').text();
const $status = $('.sliderQty');
const $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
setTimeout(function() {
let t = $('.slick-dots .slick-active button').attr('aria-label');
$status.text(t.replace('of','/'));
},10)
});
$slickElement.slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});.slide {
background: #f1f1f1;
line-height: 150px;
text-align: center;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="myslider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
<div class="slide">9</div>
<div class="slide">10</div>
</div>
<div class="sliderQty"></div>i figured it out on myown. found a better solution
var $status = $('.sliderQty');
var $slickElement = $('.myslider');
$slickElement.on('init reInit afterChange', function (event, slick,
currentSlide,
nextSlide) {
if(!slick.$dots){
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
var slidesToShow = slick.slickGetOption('slidesToShow');
var curPage = parseInt((i-1)/slidesToShow) + 1;
var lastPage = parseInt((slick.slideCount-1)/slidesToShow) + 1;
$('.currentSlide').text(curPage);
$('.lastSlide').text(lastPage);
});
$('.myslider').slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
centerPadding: '20px',
adaptiveHeight: true,
autoplay: false,
infinite: false,
speed: 500,
autoplaySpeed: 5000,
prevArrow: $('.qtyPrevBtn'),
nextArrow: $('.qtyNextBtn')
});