Basically i'm setting up a page with mutiple slideshows using the jQuery Cycle plugin. Each slideshow('.slideshow') has it own navigation in the form of a pager('.controls'). However everytime i click a pager icon all the slideshows obn the page fade to the next slide. How can I prevent this so that only the slideshow in question has the transisiton.I thought my code below would work but it isn't, and how do i show which pager icon is selected?
My code is below:
$(document).ready(function(){
$('.slideshow').each(function(){
var $this = $(this), $ss = $this.closest('.slideshow');
var pager = $ss.find('.controls');
$this.cycle({
fx: 'fade',
speed: 'slow',
timeout: 5000,
pager: pager,
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.controls li:eq(' + (idx) + ') a';
}
});
});
});
the html looks like this but with multiples on the page:
<div class="slider">
<div class="slideshow">
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a>
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a>
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a>
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a>
</div>
</div>
<!--/slider-->
<ul class="controls">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>