I'm in the process of developing a basic slideshow with 3 images, and I am relatively new to Jquery and Cycle. The slideshow is functioning properly, and the 3 pager links are also functional.
The only remaining task for me is to implement "activeSlide" functionality to the currently selected pager image. This cannot be achieved through CSS by simply applying the activeSlide class because I want to change the image source of the active pager when it is selected. If it were just simple text numbers by default, I could easily style the activeSlide class.
Essentially, my goal is to switch test-select-off.jpg with test-select-on.jpg when the active slide pager is reached.
Cycle code:
$(function() {
$('#testimonial-features').cycle({
speed: 800,
timeout: '6500',
pause: 'true',
pager: '#testimonial-switcher',
pagerAnchorBuilder: function(idx, slide) {
return '#testimonial-switcher li:eq(' + idx + ') a';
}
});
});
HTML code:
<div id="testimonial-switcher">
<ul>
<li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
<li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
<li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
</ul>
How can this be accomplished? It seems like I might need to make adjustments in the updateActivePagerLink option by modifying the updateActivePagerLink function, which can be found at :
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
$(pager).find('li').removeClass('activeLI')
.filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};
Since I am still learning the syntax, any guidance would be highly appreciated!