addClass .next() .prev() slideshow wont work

Question

I would like to make a little Slideshow with jquery. The first Problem: If I only have the "next click function", the images show up properly one after an other. But if I use the "prev" function, the next button wont work anymore. The other Problem: the slideshow should start again by the first image by clicking the "next button" after the last image. Maybe someone has an idea. thanks in advance.

         $("#next").click(function(){
            if($("#gallery li").next("#gallery li").length != 0) {
                var next = $(".toppicture").parent("li").next().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(next).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

        $("#prev").click(function(){
            if($("#gallery li").prev("#gallery li").length != 0) {
                var prev = $(".toppicture").parent("li").prev().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(prev).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

the "ul" with the id "gallery" looks like this:

    <li>
<img class="toppicture" src="images/w1.jpg" title="Title #0"/>
    </li>
    <li>
<img  src="images/w2.jpg" title="Title #1"/>
    </li>
    <li>
<img  src="images/w3.jpg" title="Title #2"/>
    </li>

Answer 1

This isn't the simplest slider, but I think it is the easiest to understand. jsFiddle

HTML:

<ul id="gallery">
    <li> <img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" title="Title #0"/> </li>
    <li> <img src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" title="Title #1"/> </li>
    <li> <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" title="Title #2"/> </li>
</ul>
<a href="#" id="previous">previous</a> <a href="#" id="next">next</a> 

JS:

function loadSlide(index){
    $('#gallery li').hide()
        .eq(index).show();
}

$('#gallery').data('index',0).find('li').hide();
loadSlide(0);

$('#next').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + 1) % numSlides;    
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();            
});
$('#previous').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + numSlides - 1) % numSlides;
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();
});

It avoids a lot of traversal (like your .next() fiasco) by separating the roles.

• The slide changing is done by a function, it takes a number and shows that slide.

• The current slide number is stored on the gallery itself using .data()

• The next and previous buttons just have to get the current slide and either increment of decrement that number appropriately, then call the slide changer.

This way you can easily expand on any particular area. Want a transition? Put it in the slide-changer. Want the slides to auto-advance? Set a timer to call the slide changer.

The only thing that separates this solution from a full featured slider is that usually you would encapsulate everything together, and use custom events rather than a function to change the slide. I'd be happy to extend this example a bit to show you the difference if you'd like.

Answer 2

Here an example in jsFiddle to you

So, what you want is something like a carousel. There's some jQuery plugins to handle this effect, like this one: jCarousel by Sorgalla.com