actualmente mi control deslizante muestra el recuento total de diapositivas como número de puntos, también quiero mostrar el número de punto activo actual, actualmente muestra el número de diapositivas activas aquí está mi código
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') });alguna solución posible?
Tal vez simplemente pueda tomar el texto del punto activo: $('.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>Lo descubrí por mi cuenta. encontró una mejor solución
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') });