Search code examples
jqueryjssor

Get the number of available images and remaining images of a Jssor slider

I have a Jssor slider displaying images and want to show the number of remaining images present in the slider on the right side, as well as the total number of images on the left side. Please refer to the attached screenshot as an example. Example image slider

slider options:

< script type = "text/javascript" >
  jQuery(document).ready(function($) {

    var jssor_1_options = {
      $AutoPlay: false,
      $AutoPlaySteps: 4,
      $SlideDuration: 160,
      $SlideWidth: 200,
      $SlideSpacing: 3,
      $Cols: 4,
      $Captions: true,
      $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$,
        $Steps: 1
      },
      $BulletNavigatorOptions: {
        $Class: $JssorBulletNavigator$,
        $SpacingX: 1,
        $SpacingY: 1
      }
    };

    var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
< /script>

html:

<div class="imgSlider">
  <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: -30px; width: 1000px ! important; height: 150px; overflow: hidden; visibility: hidden;">


      <div style="display: none;">
        <img data-u="image" src="Content/img/logo1.jpg" />
        <div class="caption" style="position: fixed; top: 90px; left: 80px; width: auto; height: 0px; font-weight: bold; text-align:center; font-size: 15px;" u="caption">
          <p>Report1</p>
        </div>
      </div>
      <div style=": none;">
        <img data-u="image" src="Content/img/logo2.jpg" />
        <div class="caption" style="position: fixed; top: 90px; left: 80px; width: auto; height: 0px; font-weight: bold;text-align:center; font-size: 15px;" u="caption">
          <p>Report2</p>
        </div>
      </div>

      <!--more slides-->

  </div>
</div>
Solution

  • total of images you get like this:

    tot_img=$('img[data-u="image"]').length;

    remaining images: use jssor's event $EVT_PARK to get the current index of slide. remaining images is just subtracting from total images:

    tot_img=$('img[data-u="image"]').length;
jssor_1_slider.$On($JssorSlider$.$EVT_PARK,function(slideIndex, fromIndex){
    console.log('remaining:'+ parseInt(tot_img-slideIndex-1))
});

    more info on jssor api here

    fiddle: here