javascriptjqueryanythingslider

Add class to external navigation when slide auto-play happens : anythingSlider


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


Solution

  • 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;
    });
    

    Demo: http://jsfiddle.net/Mottie/ycUB6/76/