My anythingSlider looks like this
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">
<div id="externalNav">
Goto <a href="#1">One</a> |
<a href="#2">Two</a> |
<a href="#3">Three</a> |
<a href="#4">Four</a>
</div>
<br><br>
<ul id="slider">
<li><img src="http://placekitten.com/300/200" alt="" /></li>
<li><img src="http://placehold.it/300x200" alt="" /></li>
<li><img src="http://placebear.com/300/200" alt="" /></li>
<li><img src="http://lorempixel.com/300/200" alt="" /></li>
<li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
autoPlay: true
});
When autoplay happens and first slide is active I want to add a class to <a href="#1">One</a>
(and so on for next slides) so that I can show it as selected. Can any one point out what is the correct approach to make this?
JsFiddle
The AnythingSlider Wiki has just the example you wanted:
Custom, external navigation controls (with updating "cur" class)
var nav = $('#externalNav a'), updateNav = function(page){ nav .removeClass('cur') .eq(page).addClass('cur'); } $('#slider').anythingSlider({ // If true, builds a list of anchor links to link to each panel buildNavigation: false, onInitialized: function(e, slider) { updateNav(slider.currentPage-1); }, // Callback before slide animates onSlideBegin: function(e, slider) { updateNav(slider.targetPage-1); } }); // set up external links nav.click(function(){ var slide = $(this).attr('href').substring(1); $('#slider').anythingSlider(slide); return false; });