Подсчет количества слайдов в карусели

697

23 декабря 2016, 15:48

Здравствуйте! Есть слайдер - SliderPro. Использую его в своем проекте, сейчас стал вопрос - как сделать подсчет количества слайдов в карусели в формате 1/n где 1 - номер текущего слайда, n - их суммарное количество. В API слайдера я виду методы, которые вроде бы позволяют реализовывать такую штуку: getSelectedSlide(), getTotalSlides() (ссылка), но как их использовать я не знаю. Просьба помочь. Линк на кодпен с примером.

P.S. Карусель зациклена, так что подсчет слайдов html проблему не решит (слайды клонируются)

var $sliderEl = $('#my-slider'); 
var sliderObj; 
 
setTimeout(function () { 
    $sliderEl.sliderPro({ 
        width: 698, 
        height: 561, 
        imageScaleMode: 'contain', 
        buttons: false, 
        arrows: true, 
        fadeArrows: false, 
        loop: true, 
        autoplay: false, 
        slideAnimationDuration: 1000, 
 
        thumbnailPointer: true, 
        thumbnailsPosition: 'right', 
        thumbnailWidth: 336, 
        thumbnailHeight: 115, 
        breakpoints: { 
            1366: { 
                width: 484 
            }, 
            1023: { 
                thumbnailPointer: false 
            } 
        } 
    }); 
    sliderObj = $sliderEl.data( 'sliderPro' ); 
}, 400); 
 
$('.fullscreen-slider-btn').click(function() { 
    if ('undefined' !== sliderObj) { 
        sliderObj.update(); 
    } 
});

<link rel="stylesheet" href="http://tripedali.com/wp-content/uploads/2016/12/slider-pro.min_.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://freepps.top/js/jquery.sliderPro.min.js"></script> 
   
<div class="slider-pro" id="my-slider"> 
    <div class="sp-slides"> 
        <!-- Slide 1 --> 
        <div class="sp-slide"> 
            <img class="sp-image" src="http://bqworks.com/slider-pro/images/image1_medium.jpg"/> 
        </div> 
 
        <!-- Slide 2 --> 
        <div class="sp-slide"> 
            <img class="sp-image" src="http://bqworks.com/slider-pro/images/image2_medium.jpg"/> 
        </div> 
 
        <!-- Slide 3 --> 
        <div class="sp-slide"> 
            <img class="sp-image" src="http://bqworks.com/slider-pro/images/image3_medium.jpg"/> 
        </div> 
    </div> 
</div>

Answer 1

В вашем примере не вижу, чтобы слайды клонировались. Всё те же три блока с классом .sp-slide, к которым по кругу добавляется класс .sp-selected.

Если ничего не напутал, то достаточно пересчитать слайды и найти индекс активного слайда.

Обновлять счётчик удобно по событию gotoSlideComplete. А задать ему первое значение – по событию init.

Проверьте: http://codepen.io/glebkema/pen/MbRomQ

var $sliderEl = $('#my-slider'); 
var sliderObj; 
 
setTimeout(function () { 
  $sliderEl.sliderPro({ 
    width: 698, 
    height: 561, 
    imageScaleMode: 'contain', 
    buttons: false, 
    arrows: true, 
    fadeArrows: false, 
    loop: true, 
    autoplay: false, 
    slideAnimationDuration: 1000, 
 
    thumbnailPointer: true, 
    thumbnailsPosition: 'right', 
    thumbnailWidth: 336, 
    thumbnailHeight: 115, 
    breakpoints: { 
      1366: { 
        width: 484 
      }, 
      1023: { 
        thumbnailPointer: false 
      } 
    } 
  }); 
  sliderObj = $sliderEl.data( 'sliderPro' ); 
}, 400); 
$('.fullscreen-slider-btn').click(function() { 
  if ('undefined' !== sliderObj) { 
    sliderObj.update(); 
  } 
}); 
 
var $counter = $('#slide-counter'); 
$sliderEl.on( 'init', updateCounter ) 
$sliderEl.on( 'gotoSlideComplete', updateCounter ) 
 
function updateCounter() { 
  $counter.text( ($sliderEl.find('.sp-selected').index() + 1) + ' / ' +  $sliderEl.find('.sp-slide').length ); 
}

h1 { 
  text-align: center; 
}

<link rel="stylesheet" href="http://tripedali.com/wp-content/uploads/2016/12/slider-pro.min_.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://freepps.top/js/jquery.sliderPro.min.js"></script> 
   
<h1 id="slide-counter">Номер слайда</h1> 
 
<div class="slider-pro" id="my-slider"> 
    <div class="sp-slides"> 
        <!-- Slide 1 --> 
        <div class="sp-slide"> 
            <img class="sp-image" src="http://bqworks.com/slider-pro/images/image1_medium.jpg"/> 
        </div> 
 
        <!-- Slide 2 --> 
        <div class="sp-slide"> 
            <img class="sp-image" src="http://bqworks.com/slider-pro/images/image2_medium.jpg"/> 
        </div> 
 
        <!-- Slide 3 --> 
        <div class="sp-slide"> 
            <img class="sp-image" src="http://bqworks.com/slider-pro/images/image3_medium.jpg"/> 
        </div> 
    </div> 
</div>

Answer 2

Уберите setTimeout обертку

Оберните в $( document ).ready

$( document ).ready(function(){
      var $sliderEl = $('#my-slider');
      var sliderObj;
      $sliderEl.sliderPro({
                  width: 698,x
                  height: 561,
                  imageScaleMode: 'contain',
                  buttons: false,
                  arrows: true,
                  fadeArrows: false,
                  loop: true,
                  autoplay: false,
                  slideAnimationDuration: 1000,
                  thumbnailPointer: true,
                  thumbnailsPosition: 'right',
                  thumbnailWidth: 336,
                  thumbnailHeight: 115,
                  breakpoints: {
                      1366: {
                          width: 484
                      },
                      1023: {
                          thumbnailPointer: false
                      }
                  }
              });
              sliderObj = $sliderEl.data( 'sliderPro' );
              console.log(sliderObj.getTotalSlides());
          $('.fullscreen-slider-btn').click(function() {
              if ('undefined' !== sliderObj) {
                  sliderObj.update();
              }
          });
        })