Question

I’m using a small plug-slider that has 2 main functions rotate() and rotateSwitch()

rotate = function(){    
    var triggerID = $active.attr("rel") - 1;
    var image_reelPosition = triggerID * imageWidth;

    $(".paging a").removeClass('active');
    $active.addClass('active');

    //Slider Animation
    $(".image_reel").animate({ 
        left: -image_reelPosition
    }, 500 );

}; 


rotateSwitch = function(){      
    play = setInterval(function(){
        $active = $('.paging a.active').next();
        if ( $active.length === 0) {
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000);  (7 seconds)
};

rotateSwitch();

This works well if the paging buttons are as follows:

<div class="paging">
  <a href="#" rel="1">1</a>
  <a href="#" rel="2">2</a>
  <a href="#" rel="3">3</a>
  <a href="#" rel="4">4</a>
</div>

But my problem (for needs of style) is that the pagination is made in this way;

<div class="paging">
      <ul>
                <li><a href="#" rel="1">1</a></li>
                <li><a href="#" rel="2">2</a></li>
                <li><a href="#" rel="3">3</a></li>
                <li><a href="#" rel="4">4</a></li>
            </ul>
</div>

Then the rotation is not working. I think the problem is not finding the link below because this line: (in the rotateSwitch() function )

$active = $('.paging a.active').next();
    if ( $active.length === 0) {
        $active = $('.paging a:first'); //go back to first
    }

If this is the error, how to find the next() child of the list?

Answer 1

Yes, a.active doesn’t have siblings inside the li, hence no result from .next(). You’ll need to traverse through the parent to locate the next li first and then dive back down to the link within:

$active = $('.paging a.active').parent().next().find('a');