如何在一页上放置多个 jssor 滑块? [英] How to put up many jssor sliders on one page?

问题描述

当我尝试在页面上放置多个滑块时，只有第一个有效.有什么办法可以让它们同时工作吗?在搜索堆栈溢出后我发现了这个

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.

推荐答案

一个设置为所有没有jQuery的滑块:

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>

没有jQuery的所有滑块的不同设置:

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>

这篇关于如何在一页上放置多个 jssor 滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！