Hello! There is a slider - SliderPro . I use it in my project, now there is a question - how to count the number of slides in a carousel in the format 1/n where 1 is the number of the current slide, n is their total number. In the slider API, I mean methods that seem to allow you to implement such a thing: getSelectedSlide() , getTotalSlides() ( link ), but I don’t know how to use them. Please help. Link to code with an example .

PS Carousel is looped, so the html slide calculation will not solve the problem (slides are cloned)

 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>

    2 answers 2

    In your example, I don’t see the slides cloned. All the same three blocks with the class .sp-slide , to which the class .sp-selected added in a circle.

    If nothing messed up, it is enough to count the slides and find the index of the active slide.

    Update the counter is convenient for the event gotoSlideComplete . And set the first value to it - on the init event .

    Check out: 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>

    UPD . Next was the answer to how to use the getSelectedSlide() and getTotalSlides() methods, but the author deleted it. But the fact is that for this there was only one step left - to apply them to sliderObj .

    But they should be used only after slider initialization, otherwise sliderObj will be undefined . That is, the blocks in the DOM can be counted by the init event, and it is still too early to sliderObj for this event.

    Therefore, the sequence of steps is different:

    1. Initialize the slider (and here hang the update counter on the event gotoSlideComplete ).
    2. Get a pointer to a slider instance.
    3. Update slide counter to show its initial value.

    Such a chain of actions also works for my decision. Here is an example with two solutions at once. On the left, count the blocks in the element tree, on the right, use getSelectedSlide() and getTotalSlides() . For clarity, removed the Timeout and part of the slider settings.

    http://codepen.io/glebkema/pen/zoXVdL

     var $counter1 = $('#counter1'); var $counter2 = $('#counter2'); var $sliderEl = $('#my-slider'); /* 1. */ $sliderEl.sliderPro({ width: 808, height: 400, imageScaleMode: 'cover', arrows: true, fadeArrows: false, loop: true, autoplay: false, gotoSlideComplete: updateCounter }); /* 2. */ var sliderObj = $sliderEl.data( 'sliderPro' ); /* 3. */ updateCounter(); function updateCounter() { $counter1.text( ($sliderEl.find('.sp-selected').index() + 1) + ' / ' + $sliderEl.find('.sp-slide').length ); $counter2.text( (sliderObj ? ((sliderObj.getSelectedSlide() + 1) + ' / ' + sliderObj.getTotalSlides()) : '...') ); } 
     body { font-family: 'Open Sans', Helvetica, sans-serif; padding: 0 4px; } .container { margin: 0 auto; max-width: 800px; } .counter { margin-bottom: 12px; } .counter_left { float: left; } .counter_right { float: right; text-align: right; } .counter__about { color: #666; font-size: .9em; } .counter__value { font-size: 1.5em; font-weight: bold; } .slider-pro { clear: both; } 
     <div class="container"> <div class="counter counter_left"> <div class="counter__value" id="counter1">Slide Counter</div> <div class="counter__about">(index + 1) / length</div> </div> <div class="counter counter_right"> <div class="counter__value" id="counter2">Slide Counter</div> <div class="counter__about">(getSelectedSlide + 1) / getTotalSlides</div> </div> <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> </div> <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>

    • Yes, indeed, I thought that here, as in an owl-carousel , the slides are cloned. Everything is fine, the question is only in one: how to make, so that instead of the text "Slide number" the number and the current slide are initially displayed? - Igor
    • one
      @ Igor Updated the answer and CodePen. Added init event handling. - Gleb Kemarsky
    • one
      @ Igor Added a solution to the answer via getSelectedSlide () and getTotalSlides (). - Gleb Kemarsky
    • Gleb, thank you so much for your help) - Igor
    1. Remove setTimeout wrapper

    2. Wrap in $ (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(); } }); })
    • I cannot remove setTimeout - the slider works in modalka, because of the initial display: none; the slider does not work correctly .. - Igor
    • one
      @ Igor So put the slider's initialization into the function and call it when opening the modal window - Roman Polshikov