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 cli开发者_如何学Ccking 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();
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();
精彩评论