Jssor non-jquery slider dynamic amount multiple slider on one page

问题

How can I put dynamic amount multiple slider on a single page? I could use 2 sliders on a page as follows:

<script>
jssor_sliderb_starter1 = function (containerId) {
    ...
};
jssor_sliderb_starter2 = function (containerId) {
    ...
};

<div id="sliderb_container1">
...
<script>
    jssor_sliderb_starter1('sliderb_container1');
</script> </div> 

<div id="sliderb_container2">
...
<script>
    jssor_sliderb_starter2('sliderb_container2');
</script> </div>

But what if I dont know the amount of the sliders? Please help..

回答1:

I have added 4 identical sliders on my page with different images and captions and used the following code and it works fine.

<!-- Jssor Sliders -->
    <script>
    jssor_sliderb_starter = function (containerId) {
    ...
    };
    </script>


    <!-- Jssor Slider Begin -->
    <div id="sliderb_container1" class="sliderb_con">
        ...
        <script>
            jssor_sliderb_starter('sliderb_container1');
        </script>
    </div>

    <div id="sliderb_container2" class="sliderb_con">
        ...
        <script>
            jssor_sliderb_starter('sliderb_container2');
        </script>
    </div>

    <div id="sliderb_container3" class="sliderb_con">
        ...
        <script>
            jssor_sliderb_starter('sliderb_container3');
        </script>
    </div>

    <div id="sliderb_container4" class="sliderb_con">
        ...
        <script>
            jssor_sliderb_starter('sliderb_container4');
        </script>
    </div>
    <!-- Jssor Slider End -->

So now if I add more sliders i will have to use different ids only. I was confused about how to use the ids to call the function and thought i have to write different functions for each slider. But the code worked. Thank You :)

回答2:

<!-- Jssor Sliders -->
<script>
   jssor_sliderb_starter = function (containerId) {
   }
</script>

<div id="sliders">
    <!-- Jssor Slider Begin -->
    <div class="sliderb_con">
    </div>

    <div class="sliderb_con">
    </div>

    <div class="sliderb_con">
    </div>

    <div class="sliderb_con">
    </div>
    <!-- Jssor Slider End -->
</div>

<script>
    var slidersElement = document.getElementById("sliders");
    for (var tmpEl = slidersElement.firstChild; tmpEl; tmpEl =tmpEl.NextSibling) {
        if (tmpEl.nodeType == 1) {
            jssor_sliderb_starter(tmpEl);
        }
    }
</script>

来源：https://stackoverflow.com/questions/30062537/jssor-non-jquery-slider-dynamic-amount-multiple-slider-on-one-page

标签

jssor