Добавить несколько экземпляров Jssor я освобождаю реагирующие слайдие

Question

Если я следовать рекомендациям этого поста:

How can I add multiple jssor instances on the same page?

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

Для уточнения вот пример кода я использую:

jQuery(document).ready(function ($) { 
     var options_vertical_slider = { 
      $AutoPlay: true,         //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false 
      $PlayOrientation: 2,        //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1 
      $DragOrientation: 2,        //[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) 

      $ArrowNavigatorOptions: { 
       $Class: $JssorArrowNavigator$,    //[Requried] Class to create arrow navigator instance 
       $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
       $AutoCenter: 1,         //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
       $Steps: 1          //[Optional] Steps to go for each navigation request, default value is 1 
      } 
     }; 

     var jssor_vertical_slider = new $JssorSlider$("container_vertical_slider", options_vertical_slider); 
     var options_photo_slider = { 
      $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 
      $SlideDuration: 500,        //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
      $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) 
      $UISearchMode: 0,         //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). 

      $ThumbnailNavigatorOptions: { 
       $Class: $JssorThumbnailNavigator$,    //[Required] Class to create thumbnail navigator instance 
       $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 

       $Loop: 2,          //[Optional] Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1 
       $SpacingX: 3,         //[Optional] Horizontal space between each thumbnail in pixel, default value is 0 
       $SpacingY: 3,         //[Optional] Vertical space between each thumbnail in pixel, default value is 0 
       $DisplayPieces: 6,        //[Optional] Number of pieces to display, default value is 1 
       $ParkingPosition: 204,       //[Optional] The offset position to park thumbnail, 

       $ArrowNavigatorOptions: { 
        $Class: $JssorArrowNavigator$,    //[Requried] Class to create arrow navigator instance 
        $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
        $AutoCenter: 2,         //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
        $Steps: 6          //[Optional] Steps to go for each navigation request, default value is 1 
       } 
      } 
     }; 

     var jssor_photo_slider = new $JssorSlider$("slider_photo_container", options_photo_slider);    



     //responsive code begin 
     //you can remove responsive code if you don't want the slider scales while window resizes 
     function ScaleSlider() { 
      var parentWidth = jssor_vertical_slider.$Elmt.parentNode.clientWidth; 
      if (parentWidth) 
       jssor_vertical_slider.$ScaleWidth(Math.min(parentWidth, 480)); 
      else 
       window.setTimeout(ScaleSlider, 30); 
     } 

     //Scale slider immediately 
     ScaleSlider(); 

     $(window).bind("load", ScaleSlider); 
     $(window).bind("resize", ScaleSlider); 
     $(window).bind("orientationchange", ScaleSlider); 
     //responsive code end    
    }); 

Когда jssor_photo_slider инстанциируется я теряю отзывчивое масштабирование для содержимого внутри container_vertical_slider.

Answer 1

Для второго ползунка замените весь «слайдер1» на «слайдер2».

Проверьте код (как html, так и javascript).

Следующий пример отзывчивых кодов для второго ползунка.

//responsive code begin 
    //you can remove responsive code if you don't want the slider scales 
    //while window resizes 
    function ScaleSlider() { 
     var parentWidth = $('#slider2_container').parent().width(); 
     if (parentWidth) { 
      jssor_slider2.$ScaleWidth(parentWidth); 
     } 
     else 
      window.setTimeout(ScaleSlider, 30); 
    } 
    //Scale slider after document ready 
    ScaleSlider(); 

    //Scale slider while window load/resize/orientationchange. 
    $(window).bind("load", ScaleSlider); 
    $(window).bind("resize", ScaleSlider); 
    $(window).bind("orientationchange", ScaleSlider); 
    //responsive code end 

Answer 2

Вторая чувствительная функция шкалы решает проблему. Думаю, вам нужно добавить один для каждого слайдера на странице:

 function ScaleSlider2() { 
      var parentWidth = jssor_photo_slider.$Elmt.parentNode.clientWidth; 
      if (parentWidth) 
       jssor_photo_slider.$ScaleWidth(Math.min(parentWidth, 770)); 

      else 
       window.setTimeout(ScaleSlider, 30); 
     } 
     ScaleSlider2(); 

     $(window).bind("load", ScaleSlider2); 
     $(window).bind("resize", ScaleSlider2); 
     $(window).bind("orientationchange", ScaleSlider2); 
     //responsive code end