获取Jssor滑块的可用图像数和剩余图像数

Question

我有一个Jssor滑块显示图像，并希望显示右侧滑块中存在的剩余图像数量，以及左侧图像的总数。请参阅附带的屏幕截图作为示例。

滑块选项：

< 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>

Answer 1

你得到的图像总数如下：

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

剩余图片：使用jssor的事件$EVT_PARK获取当前的幻灯片索引。剩下的图像只是从总图像中减去：

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

有关jssor api here

的更多信息

小提琴：here