How to place many jssor-sliders on one page?

Question

When I try to put more than one slider on my page, only the first one works. Is there a way to get all of them to work at the same time? After searching o I found this

Please initialize multiple instances as follows,

var jssor_slider1 = new $JssorSlider$("slider1_container", options1); var jssor_slider2 = new $JssorSlider$("slider2_container", options2); 

But where am I doing this. He will work because this decision has not been made. There was no other answer.

Answer 1

One setting for all sliders without jQuery:

  <script> jssor_slider1_starter = function (containerId) { ... }; </script> <div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px"> ... <script> jssor_slider1_starter('slider1_container'); </script> </div> <div id="slider2_container" style="position:relative;top:0px;left:0px;width:600px;height:300px"> ... <script> jssor_slider1_starter('slider2_container'); </script> </div> 

Various settings for all sliders without jQuery:

  <script> jssor_slider1_starter = function (containerId) { ... }; jssor_slider2_starter = function (containerId) { ... }; </script> <div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px"> ... <script> jssor_slider1_starter('slider1_container'); </script> </div> <div id="slider2_container" style="position:relative;top:0px;left:0px;width:600px;height:300px"> ... <script> jssor_slider2_starter('slider2_container'); </script> </div> 

Answer 2

@jcropp: "How to configure multiple parameters using methods using jQuery?" I do not use jQuery and jssor slider, I have a slider without jQuery only JS, but:

One setting for all sliders with jQuery

1. All <style>...</style> are cut and placed after the last # slider1_container.

After:

  <div id="slider1_container" style="position: relative; width: 600px; height: 300px; overflow: hidden;"> <!-- content 1 --> </div> 

2. add:

  <div id="slider1_container" style="position: relative; width: 600px; height: 300px; overflow: hidden;"> <!-- content 2 --> </div> //add slider №3,4 and more. 

What:

 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.$ScaleWidth(Math.min(parentWidth, 600)); else window.setTimeout(ScaleSlider, 30); } 

3. is replaced by the following:

  al_sldrs=document.querySelectorAll('#slider1_container'); var jssor_slider1 = new $JssorSlider$(al_sldrs[0], options);//add slider №1 var jssor_slider2 = new $JssorSlider$(al_sldrs[1], options);//add slider №2 //add slider №3,4 and more. function ScaleSlider() { var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; if (parentWidth){ jssor_slider1.$ScaleWidth(Math.min(parentWidth, 600));//add slider №1 jssor_slider2.$ScaleWidth(Math.min(parentWidth, 600)) //add slider №2 //add slider №3,4 and more. } else window.setTimeout(ScaleSlider, 30); } 

For all participants: why not work ?:

 al_sldrs=document.querySelectorAll('#slider1_container'); var jssor_slider1 = new $JssorSlider$(for(i=0;i<al_sldrs.length;i++)al_sldrs[i], options); for(i=0;i<al_sldrs.length;i++)al_sldrs[i].$ScaleWidth(Math.min(parentWidth, 600)); jssor_slider1.$Elmt=al_sldrs[i];for(i=0;i<al_sldrs.length;i++) jssor_slider1.$ScaleWidth(Math.min(parentWidth, 600)); var sldrs = jssor_slider1 || jssor_slider2;sldrs.$ScaleWidth(Math.min(parentWidth, 600)); 

Answer 3

I use php to get information from the mysql database, and it will create several containers, which at the end of them include a slider (dynamically built with images from the folder). So, I do not know how many sliders I will have, but I found a quick and dirty way to get around this.

I downloaded all javascript with 1 file called sliders.js

it has all the original content:

 jQuery(document).ready(function ($){ //--------------------HERE I ADD AN EACH FUNCTION------------------- //------------------------------------------------------------------ $(".jsslider").each(function(index){ var SliderID = $(this).attr('id'); // ---- Just for my own reference while troubleshooting ---- // console.log("Index: " + index + " | Created Slider with ID: " + SliderID ); var jssor_1_SlideshowTransitions = [ {$Duration:1200,x:0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,y:0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,y:-0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:0.3,$Cols:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,y:0.3,$Rows:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2} ]; var jssor_1_options = { $FillMode: 5, $AutoPlay: false, $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: jssor_1_SlideshowTransitions, $TransitionsOrder: 1 }, $ArrowNavigatorOptions: { $Class: $JssorArrowNavigator$ }, $ThumbnailNavigatorOptions: { $Class: $JssorThumbnailNavigator$, $Cols: 10, $SpacingX: 8, $SpacingY: 8, $Align: 360 } }; //-----------------HERE IS WHERE THE MAGIC HAPPENS-------------- var jssor_1_slider = new $JssorSlider$(SliderID , jssor_1_options); //-------------------------------------------------------------- function ScaleSlider() { var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth; if (refSize) { refSize = Math.min(refSize, 800); jssor_1_slider.$ScaleWidth(refSize); } else { window.setTimeout(ScaleSlider, 30); } } ScaleSlider(); $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); }); }); 

So, when I load my HTML from PHP, its source HTML code, except for the ID, is set depending on the identifier of the information I get from the database, which keeps it unique, in my case the identifier is something like "GameID "-2784" etc.

 <!-- SLIDER --> <div class="jsslider" id="'.$g_id.'" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 608px; height: 456px; overflow: hidden; visibility: hidden; background-color: #000;"> <div data-u="loading" style="position: absolute; top: 0px; left: 0px;"> <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div> 

..........

As mentioned, I know this is a dirty way to do this. But it’s very easy and works very well if you use many sliders with the same parameters, and just just want to give them a “class”, --- and more importantly, I don’t know the ID (so you can add them to java-script .

Would be glad to hear if anyone has a simpler solution!