How to put up many jssor sliders on one page?

Question

When i try to put more than one slider on my page only first one works. Is there any way to make all of them work at same time? After searching o stack overflow i found this

Please initialize multiple instances in following manner,

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

But where do i put this.Is it going to work because this solution was not accepted.There was no other answer as well.

Answer 1

@jcropp: "How do you set up multiple settings using the methods that use jQuery?" I do not use jQuery and jssor slider, I did own a slider without jQuery only JS, but:

One setting for all sliders with jQuery

1. All <style>...</style> cut and placed after 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.

That:

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 that:

 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 everyone members: Why not work that?:

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 2

Very simple!

Every time you begin a work on your JSSOR workspace it always doesn't change the Id. The same ids on a page will interfere with one another. Hence, on your SLIDER OPTION, change the ID from 1 to a different something. And that's it.

Answer 3

I am using php to get information from a mysql database, and it will build several containers which at the end of them all include a slider (dynamically built with images from a folder - So, I don't know how many sliders I will have but I found a quick and dirty way to work around that.

I loaded all the javascript with 1 file, it's 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 with PHP, its all original HTML - except the ID is dyanmiacally set depending on the ID of the information I get from database which keeps it unique, in my case the ID's are 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 it's a dirty way of doing it, But it's very easy and works real good if you're using a lot of sliders with the same options, and you simply just want to give them a 'class' --- and more importantly, do not know the ID's (so you can add them to the java-script.

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

Answer 4

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>

Different 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>