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>
<div id="nav-slider">
    <span></span>
    <span></span>
    <span></span>
</div>

<br>

<!-- Add additional stylesheets here -->
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">

<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+ ***/
ul#slider {
    width: 300px;
    height: 200px;
    list-style: none;
}

/* navigation css */
#nav-slider {
    text-align: center;
}
#nav-slider ul, #nav-slider span {
    display: inline-block;
}
#nav-slider li {
    display: inline-block;
    padding: 4px;
}

#nav-slider a {
    display: inline-block;
    width: auto;
    height: 20px;
    background: #999;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}
#nav-slider a:hover { background: #000; }
#nav-slider a.cur { background: #0080ff; }
#nav-slider a.start-stop { background: #080; }
#nav-slider a.start-stop.playing { background: #800; }

JavaScript

$('#slider').anythingSlider({
    // A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
    appendBackTo: $('#nav-slider span:eq(0)'),
    appendControlsTo: $('#nav-slider span:eq(1)'),
    appendForwardTo: $('#nav-slider span:eq(2)'),

    // Details at the top of the file on this use (advanced use)
    navigationFormatter: function(index, panel) {
        // This is the default format (show just the panel index number)
        return "" + index;
    }
});