how to initialize multiple instances of slider script - one slider for each div based on the div's class attribute

Question

I'm pretty new to javascript. I'm having trouble initializing multiple instances of a slider script. I want 1 slider initialized for each div with class "horizontalSlider" by giving the script that div's id so that each instance is unique.

Here's what I have so far but it is not working.

$(document).ready(function(){
                $('.horizontalSlider').each(function(){
                    var thisSlider = '"#' + $(this).attr("id") + ' ul"';
                    $(thisSlider).bxSlider({
                        mode : 'horizontal',
                        speed : 500,
                        prevImage : 'prev.svg',
                        nextImage : 'next.svg',
                        easing : 'swing'
                    });
                });
            });

you can review the `$(this)` keyword, it is very useful in loops like this one — Don, Jul 03 '12 at 18:37

score 2 · Accepted Answer · answered Jul 03 '12 at 18:29

      $(document).ready(function(){
            $('.horizontalSlider').each(function(){

                $(this).bxSlider({
                    mode : 'horizontal',
                    speed : 500,
                    prevImage : 'prev.svg',
                    nextImage : 'next.svg',
                    easing : 'swing'
                });
            });
        });

score 0 · Answer 2 · answered Aug 16 '17 at 13:58

You can do it like this:

            $(document).ready(function(){
                $('.horizontalSlider').each(function($element){
                    $element.bxSlider({
                        mode : 'horizontal',
                        speed : 500,
                        prevImage : 'prev.svg',
                        nextImage : 'next.svg',
                        easing : 'swing'
                    });
                });
            });

score 0 · Answer 3 · answered Dec 28 '17 at 11:19

I think that in this case it is not necessary the each

It could be simplified to the following:

$(document).ready(function(){
            $('.horizontalSlider').bxSlider({
                mode : 'horizontal',
                speed : 500,
                prevImage : 'prev.svg',
                nextImage : 'next.svg',
                easing : 'swing'
            });
        });

how to initialize multiple instances of slider script - one slider for each div based on the div's class attribute

3 Answers3

Linked