显示当前活动的圆点滑块

Posted 2023-05-07

【中文标题】显示当前活动的圆点滑块

【英文标题】：show the current active dot slick slider

【发布时间】：2021-12-30 00:14:23

【问题描述】：

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

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

任何可能的解决方案？

【参考方案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>

【讨论】：

好吧，我找到了更好的解决方案。 $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) 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; $('.your-selector').text(curPage); $('.你的选择器').text(lastPage); );

【参考方案2】：

我自己想出来的。找到了更好的解决方案

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

【讨论】：

这不是比简单的工作多得多：let i = $('.slick-dots .slick-active').text();？喜欢更多...