jssor在一个页面上的两个独立的滑块

Question

我想问我是否可以在一个页面中有两个独立的jssor滑块。我想要做的是创建2个滑块，它将作为页面的独立部分。这意味着我希望两个滑块的动画可以同时启动。

我将不胜感激任何帮助

谢谢！

Answer 1

<div id="slider1_container" ...> 
    ... 
</div> 

<div id="slider2_container" ...> 
    ... 
</div> 

<script> 
    jQuery(document).ready(function ($) { 
     var options1 = {...}; 
     var jssor_slider1 = new $JssorSlider$("slider1_container", options1); 

     var options2 = {...}; 
     var jssor_slider2 = new $JssorSlider$("slider2_container", options2); 
    }); 
</script> 

Answer 2

非常感谢您的回答。

我可以在jssor包的nested-slider.source.html文件中导入标题转换吗？我在这个文件中创建了自己的滑块，但是当我为字幕转换添加数组时，什么都没有发生。我应该如何制作带有图片和标题动画的幻灯片？

看看我的代码，如果你想。我不知道是否所有这些代码是必要的me..Here是jQuery的：

jQuery(document).ready(function ($) { 

     var nestedSliders = []; 

     $.each(["sliderh1_container", "sliderh2_container"], function (index, containerId) { 
      var nestedSliderOptions = { 
       $AutoPlay:true, 
       $PauseOnHover: 0,        //[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, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 
       $SlideDuration: 1000,        //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
       $MinDragOffsetToSlide: 20,       //[Optional] Minimum drag offset to trigger slide , default value is 20 
       //$SlideWidth: 200,         //[Optional] Width of every slide in pixels, default value is width of 'slides' container 
       //$SlideHeight: 150,        //[Optional] Height of every slide in pixels, default value is height of 'slides' container 
       $Cols: 1,         //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 
       $Align: 0,        //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 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). 

       $BulletNavigatorOptions: {        //[Optional] Options to specify and enable navigator or not 
        $Class: $JssorBulletNavigator$,      //[Required] Class to create navigator instance 
        $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
        $AutoCenter: 0,         //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
        $Steps: 1,          //[Optional] Steps to go for each navigation request, default value is 1 
        $Rows: 1,          //[Optional] Specify lanes to arrange items, default value is 1 
        $SpacingX: 10,         //[Optional] Horizontal space between each item in pixel, default value is 0 
        $SpacingY: 0,         //[Optional] Vertical space between each item in pixel, default value is 0 
        $Orientation: 1         //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1 
       } 
      }; 

      nestedSliders.push(new $JssorSlider$(containerId, nestedSliderOptions)); 
     }); 

     var _CaptionTransitions = []; 
     _CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 }; 
     _CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 }; 
     _CaptionTransitions["T"] = { $Duration: 900, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 }; 
     _CaptionTransitions["B"] = { $Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 }; 
     _CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }; 
     _CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} }; 
     _CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5} }; 
     _CaptionTransitions["RTTL|BR"] = { $Duration: 900, x: -0.6, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} }; 
     _CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 }; 
     _CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} }; 
     _CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} }; 

     var options = { 
      $AutoPlay: true,         //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false 
      $AutoPlaySteps: 1,         //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1 
      $AutoPlayInterval: 2000,       //[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, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 

      $ArrowKeyNavigation: true,       //[Optional] Allows keyboard (arrow key) navigation or not, default value is false 
      $SlideDuration: 300,        //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
      $MinDragOffsetToSlide: 80,       //[Optional] Minimum drag offset to trigger slide , default value is 20 
      //$SlideWidth: 600,         //[Optional] Width of every slide in pixels, default value is width of 'slides' container 
      //$SlideHeight: 150,        //[Optional] Height of every slide in pixels, default value is height of 'slides' container 
      $SlideSpacing: 3,         //[Optional] Space between each slide in pixels, default value is 0 
      $Cols: 1,         //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 
      $Align: 0,        //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 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). 
      $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: 0,        //[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 $Cols is greater than 1, or parking position is not 0), 
      $CaptionSliderOptions: {       //[Optional] Options which specifies how to animate caption 
       $Class: $JssorCaptionSlider$,     //[Required] Class to create instance to animate caption 
       $CaptionTransitions: _CaptionTransitions,  //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder 
       $PlayInMode: 1,         //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1 
       $PlayOutMode: 3         //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1 
      },    

      $ThumbnailNavigatorOptions: { 
       $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 
       $AutoCenter: 3,         //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3 
       $Rows: 1,          //[Optional] Specify lanes to arrange thumbnails, default value is 1 
       $SpacingX: 0,         //[Optional] Horizontal space between each thumbnail in pixel, default value is 0 
       $SpacingY: 0,         //[Optional] Vertical space between each thumbnail in pixel, default value is 0 
       $Cols: 3,        //[Optional] Number of pieces to display, default value is 1 
       $Align: 0,       //[Optional] The offset position to park thumbnail 
       $Orientation: 1,        //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1 
       $DisableDrag: false       //[Optional] Disable drag or not, default value is false 
      } 
     }; 

     var jssor_slider1 = new $JssorSlider$("slider1_container", options); 

     function OnMainSliderPark(currentIndex, fromIndex) { 
      $.each(nestedSliders, function (index, nestedSlider) { 
       nestedSlider.$Pause(); 
      }); 

      setTimeout(function() { 
       nestedSliders[currentIndex].$Play(); 
      }, 2000); 
     } 

     jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnMainSliderPark); 
     OnMainSliderPark(0, 0); 

     //responsive code begin 
     //you can remove responsive code if you don't want the slider scales while window resizes 
     function ScaleSlider() { 
      var bodyWidth = document.body.clientWidth; 
      if (bodyWidth) 
       jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 600)); 
      else 
       window.setTimeout(ScaleSlider, 30); 
     } 
     ScaleSlider(); 

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

和HTML代码是在这里：

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1280px; height: 720px; overflow: hidden; "> 

 <div id="slider2"> 
      <div id="sliderh2_container" class="sliderh2" style="position: relative; top: 0px; left: 0px; width: 764px; 
       height: 720px;"> 

       <!-- Slides Container --> 
       <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 764px; height: 720px; 
        overflow: hidden;"> 
        <div> 
         <div><img u="image" src="images/logo.png" /></div> 
         <div u="caption" t="CLIP|LR" t2="ZML|R">test</div> 
        </div> 
        <div><img u="image" src="images/address.png" /></div> 
        <div><img u="image" src="images/logo.png" /></div> 
        <div><img u="image" src="images/address.png" /></div> 
       </div>     
      </div> 
      </div> 
     </div> 
     <div> 
     </div> 
    </div>  
</div>