Question

I think my problem may be quite simple, but after trying different approaches I just don’t get it.

The UI that I want to implement basically looks like this:

-Prev | Image 1 (Active) | Image 2 | Image 3 | Image n| Next-

I want to allow user to change active image by pressing Next or Prev buttons.

HTML for my UI looks like this:

<ul class="slideshow">
    <li><a href="#" id="prev">Prev</a></li>
    <li><a href="#" class="pic-act"><img src="1.png"  class="thumb" /></a></li>
    <li><a href="#" class="pic"><img src="2.png"  class="thumb" /></a></li>
    <li><a href="#" class="pic"><img src="3.png"  class="thumb" /></a></li>
    <li><a href="#" id="prev">Next</a></li>     
</ul>

I want to create jQuery script that would find first li element with pic-act class and thh next element that has pic class attached. After that I want to remove pic-act class from first element and add pic class to it and then I want to add pic-act class to second element.

I try to accomplish this with follow jQuery code

$(document).ready(function() {
$("#next").click(function(){
    var next = $(".pic-act ~ .pic");
    $(next).attr("class", "pic-act");
    $(".pic_act:first").attr("class", pic);     
}); 
});   

Unfortunately this code is unable to find next non pic-act element 🙁

My second requirement is when user reaches last li element and presses “Next” button one more time, the very first li element is becomes active. (Same with “Prev” button)

I hope this makes sense.

Thank You very much in advance!

Answer 1

Maybe this:

$(function(){
        $('#next').click(function(){
                var $elem = $('.slideshow .pic-act').removeClass('pic-act').addClass('pic').next('.pic');
                if ($elem.length < 1){
                        $('.slideshow .pic').eq(0).addClass('pic-act').removeClass('pic');
                }else{
                        $elem.removeClass('pic').addClass('pic-act');
                }
        });     
});