show the current active dot slick slider-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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>