Question

I am using a jquery slider which automatically generates pagination bullets with the following html output:

<ul class="pagination">
    <li class="current"><a href="#0">1</a></li>
    <li><a href="#1">2</a></li>
    <li><a href="#2">3</a></li>
    <li><a href="#3">4</a></li>
</ul>

You can see an example of this at http://pixelcakecreative.com/

I want to be able to reset the slides position (set it back to the first slide) when you click on one of the following anchor links:

<li><a href="#" rel="#panel-1" class="activeSlide pita">Trendz<div class="buttonFade"></div></a></li>
<li><a href="#" class="pita" rel="#panel-2">Decibel<div class="buttonFade"></div></a></li>
<li><a href="#" class="pita" rel="#panel-3">UCC<div class="buttonFade"></div></a></li>

The slider is actually 3 sliders within a div that switches it’s position based on whatever anchor (above code) is clicked. So basically, when you click on any of the links that switch the project slider, I want to go back to the first image of the slider.

I tried this with no luck, any idea on how to do this?

Ill start off the jquery with my existing code for clicking one of the trigger links:

$('#pixel-slider ul a.pita').click(function () {

     $('#pixel-slider ul a').removeClass('activeSlide');
     $(this).addClass('activeSlide');   
     $('.maskss').scrollTo($(this).attr('rel'), 500);

//solution below

$(‘.pagination li:nth-child(1) a’).click();

return false;       
});

UPDATE: I Found solution: $(‘.pagination li:nth-child(1) a’).click();

Answer 1

Your solution will work but you can simply use the first selector instead of using nth-child and passing 1. li:first will select the first element under .pagination element.

 $('.pagination li:first a').click();