显示当前活动的点平滑滑块

Question

当前我的滑块显示幻灯片总数为点数，我还想显示当前活动点数，当前它显示活动幻灯片的数量这是我的代码

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

有什么可能的解决方案吗？

Answer 1

也许您可以简单地获取活动的点文本：$('.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>

Answer 2

我在myown上发现了它。找到了更好的解决方案

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