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">

<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;
}
.anythingControls {
    position: relative;
}
.timer-bar {
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    top: -4px;
    z-index: 100;
}

JavaScript

var timerbar = function(slider) {
    if (slider.playing) {
        slider.$timerbar.width(0).animate({
            width: '100%'
        }, slider.options.delay - slider.options.animationTime);
    }
};

$('#slider').anythingSlider({

    autoPlay: true,
    
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        // add timer bar
        slider.$timerbar = $('<div class="timer-bar"/>')
            .prependTo(slider.$controls);
        // autoPlay starts immediately after the "onInitialized" callback
        setTimeout(function(){
            timerbar(slider);
        }, 200);
    },
    onShowStop: function(e, slider) {
        slider.$timerbar.stop().width('100%');
    },
    // Callback when slideshow pauses
    onShowPause: function(e, slider) {
        slider.$timerbar.stop();
    },
    // Callback when slideshow unpauses - may not trigger
    // properly if user clicks on any controls
    onShowUnpause: function(e, slider) {
        timerbar(slider);
    },

    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) {
        timerbar(slider);
    }

});