Question

So, i'm building a simple slideshow control with this markup:

<div class="previous"> </div>
<div class="next"> </div>
<div class="gallery"> </div>
    <div class="image-0"> </div>
    <div class="image-1"> </div>
    <div class="image-2"> </div>
    <div class="image-3 active"> </div>
    <div class="image-8"> </div>
    <div class="image-9"> </div>
    <div class="image-10"> </div>
    <div class="image-11"> </div>
</div>

and i'm trying to navigate using jQuery like this:

$('.next').click(function() {

    $('.active').next().addClass('active');
    $('.active').first().removeClass('active');


  });
$('.previous').click(function() {

    $('.active').prev().addClass('active');
    $('.active').last().removeClass('active');

});

So, the first jQuery block works as expected, first assigning the activeclass to the next div and then removing it from the first. The second block should just do it the other way around, but is doesn't remove the class from the last item after adding it to the previous one.

Am i approaching this problem from the wrong side? Or do the first() and last() functions just work differently? From what i could tell from the jquery docs, this should be working.

Was it helpful?

Solution

I created a jsfiddle with your code, and it works fine: http://jsfiddle.net/K5vN4/

(use Firebug or similar to inspect the "Result" area of the fiddle.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top