Jssor Навигация по миниатюрам Не слайд/перетаскивание

Question

Мы реализуем слайдер Jssor на нашем веб-сайте. Все работало хорошо, но пока мы настраивались на дизайн и изображения, миниатюрная навигация перестала двигаться.

Страница находится здесь: http://visionsunltd.com/CMS/advertising-gallery

<script src="http://visionsunltd.com/js/jssor.slider.min.js"></script> 
<script> 
     jQuery(document).ready(function ($) { 

      var _SlideshowTransitions = [ 
      //Fade in R 

       {$Duration: 2000, $During: { $Left: [0.3, 0.7] }, $Fade:true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $ScaleHorizontal: 0.3, $Opacity: 2 } 
       ]; 

      var options = { 
       $AutoPlay: true,         //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false 
       $AutoPlayInterval: 4000,       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
       $PauseOnHover: 1,        //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1 

       $DragOrientation: 3,        //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0) 
       $ArrowKeyNavigation: true,       //[Optional] Allows keyboard (arrow key) navigation or not, default value is false 
       $SlideDuration: 800,        //Specifies default duration (swipe) for slide in milliseconds 

       $SlideshowOptions: {        //[Optional] Options to specify and enable slideshow or not 
        $Class: $JssorSlideshowRunner$,     //[Required] Class to create instance of slideshow 
        $Transitions: _SlideshowTransitions,   //[Optional] An array of slideshow transitions to play slideshow 
        $TransitionsOrder: 1,       //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random 
        $ShowLink: true         //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false 
       }, 

       $ArrowNavigatorOptions: {      //[Optional] Options to specify and enable arrow navigator or not 
        $Class: $JssorArrowNavigator$,    //[Optional] Class to create arrow navigator instance 
        $ChanceToShow: 1        //[Required] 0 Never, 1 Mouse Over, 2 Always 
       }, 

       $ThumbnailNavigatorOptions: {      //[Optional] Options to specify and enable thumbnail navigator or not 
        $Class: $JssorThumbnailNavigator$,    //[Required] Class to create thumbnail navigator instance 
        $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 

        $ActionMode: 1,         //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1 
        $SpacingX: 8,         //[Optional] Horizontal space between each thumbnail in pixel, default value is 0 
        $DisplayPieces: 10,        //[Optional] Number of pieces to display, default value is 1 
        $ParkingPosition: 360       //[Optional] The offset position to park thumbnail 
       } 
      }; 

      var jssor_slider1 = new $JssorSlider$("slider1_container", options); 
      //responsive code begin 
      //you can remove responsive code if you don't want the slider scales while window resizes 
      function ScaleSlider() { 
       var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
       if (parentWidth) 
        jssor_slider1.$SetScaleWidth(Math.max(Math.min(parentWidth, 1000), 300)); 
       else 
        window.setTimeout(ScaleSlider, 30); 
      } 

      ScaleSlider(); 

      if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) { 
       $(window).bind('resize', ScaleSlider); 
      } 


      //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) { 
      // $(window).bind("orientationchange", ScaleSlider); 
      //} 
      //responsive code end 
     }); 
</script> 

Любые идеи о том, почему навигация эскиз не двигается, и мы не можем изменить ее, чтобы добраться до других миниатюр?

Answer 1

Я проверил ваш слайдер, всего 9 слайдов.

В $ThumbnailNavigatorOptions вы установили $DisplayPieces: 10. То есть, все 9 эскизов уже отображаются, нет возможности перетаскивать, чтобы отображать больше.

Установите $DisplayPieces: 8, таким образом вы можете получить 8 отображаемых и еще один скрытый, затем вы можете перетащить миниатюры в петлю.