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="wrap">
    <ul id="slider">
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-1.jpg" alt="" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-1.jpg" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-2.jpg" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-2.jpg" /></li>
    </ul>
</div>

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

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
ul#slider {
    width: 300px;
    height: 200px;
    list-style: none;
}

/* #wrap added to increase css priority (override anythingslider.css settings) */

/* needed so the thumbnails don't get cut off */
#wrap div.anythingSlider {
    padding-bottom: 45px;
}

/* border around link (image) to show current panel */
#wrap div.anythingSlider .thumbNav a:hover,
#wrap div.anythingSlider .thumbNav a.cur {
    border-color: #d00;
}

#wrap div.anythingSlider .anythingControls {
    z-index: 100;
    height: 35px;
    opacity: 0.90;
    filter: alpha(opacity=90);
}

#wrap div.anythingSlider .thumbNav {
    display: block;
    float: left;
    margin: 0;
    z-index: 100;
}

#wrap div.anythingSlider .thumbNav li {
    display: block;
    float: left;
}

/* link around thumbnail image */
#wrap div.anythingSlider .thumbNav a {
    background: transparent;
    display: block;
    height: 30px;
    width: 30px;
    margin: 2px 4px;
    padding: 0;
    outline: 0;
}
/* Thumbnail image */
#wrap div.anythingSlider .thumbNav .thumb {
    height: 30px;
    width: 30px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: #000 1px solid;
}

/*** color images ***
http://css-tricks.github.com/AnythingSlider/demos/images/th-slide-xxx.jpg
*** grey scale image ***
http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-xxx/jpg
*/

JavaScript

$('#slider').anythingSlider({
    navigationFormatter: function(i, panel) {
        var cur = 1, // set initial panel here - "activePage" hasn't been set up yet
            bk = '',
            grey = 'http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-',
            color = 'http://css-tricks.github.com/AnythingSlider/demos/images/th-slide-';
        bk += (cur === i) ? color : grey;
        bk += ['civil-1', 'env-1', 'civil-2', 'env-2'][i-1] + '.jpg';
        return '<div class="thumb" style="background-image:url(' + bk + ')"></div>';
    },
    onSlideComplete: function(slider){
        slider.$nav.find('.thumb').each(function(i){
            var bk = $(this).css('background-image'),
                grey = 'http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-',
                color = 'http://css-tricks.github.com/AnythingSlider/demos/images/th-';
            if (slider.currentPage === i+1) {
                $(this).css('background-image', bk.replace(grey, color) );
            } else if (!bk.match(grey)) {
                $(this).css('background-image', bk.replace(color, grey) );
            }
        })
    }
});