获取一个 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;

remaining images: 使用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

fiddle: here

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

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

jquery

jssor