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));