jquery simple image slideshow for more than one slideshow on site

Question

The solutions from here (https://stackoverflow.com/a/18493684/1969917) i use to show a image slideshow on a site. Now the client would like to have another image slideshow on the same site, but this will work. I have try it with another id and copy the javascript. But the second one will not work. Only the first slider works fine.

JS:

$(function () {

    /* SET PARAMETERS */
    var change_img_time     = 5000; 
    var transition_speed    = 100;

    var simple_slideshow    = $("#exampleSlider"),
        listItems           = simple_slideshow.children('li'),
        listLen             = listItems.length,
        i                   = 0,

    changeList = function () {

        listItems.eq(i).fadeOut(transition_speed, function () {
            i += 1;
            if (i === listLen) {
                i = 0;
            }
            listItems.eq(i).fadeIn(transition_speed);
        });

    };

    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);

});

HTML:

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>

How i must be changed on the javascript code to work with more than one slideshow on a site?

Answer 1

You can turn your code into a very simple jQuery plugin as follows:

$.fn.simpleSlides = function () {

    /* SET PARAMETERS */
    var change_img_time = 1500;
    var transition_speed = 300;
    return this.each(function () {
        var simple_slideshow = $(this),
            listItems = simple_slideshow.children('li'),
            listLen = listItems.length,
            i = 0,
            changeList = function () {
                listItems.eq(i).fadeOut(transition_speed, function () {
                    i += 1;
                    if (i === listLen) {
                        i = 0;
                    }
                    listItems.eq(i).fadeIn(transition_speed);
                });
            };
        listItems.not(':first').hide();
        setInterval(changeList, change_img_time);
    });
}

Just give the main elements a common class and use as follows:

$(function(){
    $('.slideshow').simpleSlides()
});

The each loop in the plugin will isolate instances

DEMO

Answer 2

why not write a plugin for that?

(function ($) {

    var easySliderFunc=function(options,elem){
        var setting=$.extend({
            delay=5000,
            transition=100
        },options);

        var container    = $(elem),
            listItems           = container.children('li'),
            listLen             = listItems.length,
            i                   = 0,

        changeList = function () {

            listItems.eq(i).fadeOut(setting.transition, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(setting.transition);
            });

        };

        listItems.not(':first').hide();
        setInterval(changeList, setting.delay);
    };
    $.fn.easySlider=function(options){
        return $(this).each(function(){
            easySlider(options,this);
        });
    }
}(jQuery));

then you can easy call it as:

$("#exampleSlider").easySlider({
    transition:100, //it can be any number
    delay: 5000     //it can be any number
});