AnythingSlider playground

Add, remove, adjust any or all options so you can see how it works.

by Mottie

HTML

<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/anythingslider.css">
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/swfobject.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.fx.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.video.js"></script>
<!-- Add additional stylesheets here -->
<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> |
     <a href="#5">Five</a> |
    
     <a class="play" href="#play">Play</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>

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
/* added #slider li to make panels the same size in case "resizeContents" is false */
ul#slider, ul#slider li {
    width: 300px;
    height: 200px;
    list-style: none;
}

a.cur {
    color: red;
}

JavaScript

var $s = $('#slider'),
    nav = $('#externalNav a'),
    updateNav = function(page){
        nav
            .removeClass('cur')
            .eq(page).addClass('cur');
    };

$s.anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    buildStartStop: 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
$('#externalNav a').click(function(){
    // get slide number (ignore the #)
    var slide = $(this).attr('href').substring(1),
        // get AnythingSlider data object
        slider = $s.data('AnythingSlider');
    if (slide === "play") {
        // toggle slideshow
        slider.startStop( !slider.playing );
        // change link text
        $('a.play').text( slider.playing ? 'Pause' : 'Play' );
    } else {
        // go to selected slide
        $s.anythingSlider(slide);
    }
    // prevent link from changing the hash
    return false;
});