How To Initialize Multiple Instances Of Slider Script - One Slider For Each Div Based On The Div's Class Attribute

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 givin

Solution 1:

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

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

Solution 2:

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

Solution 3:

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