AnythingSlider playground

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

by vijayweb

HTML

<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider.css">
<script src="http://proloser.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/swfobject.js"></script>
<div id="wrap">
    
    <ul id="slider">
        
        <li><img src="http://proloser.github.com/AnythingSlider/demos/images/slide-civil-1.jpg" alt="" /></li>
        
        <li><img src="http://proloser.github.com/AnythingSlider/demos/images/slide-env-1.jpg" /></li>
        
        <li><img src="http://proloser.github.com/AnythingSlider/demos/images/slide-civil-2.jpg" /></li>
        
        <li><img src="http://proloser.github.com/AnythingSlider/demos/images/slide-env-2.jpg" /></li>
        
    </ul>
    
</div>

CSS

/* #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://proloser.github.com/AnythingSlider/demos/images/th-slide-xxx.jpg
*** grey scale image ***
http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-xxx/jpg
*/

/* panel 1 grey thumb */
#wrap .panel1 .thumb { background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-civil-1.jpg); }
/* panel 1 color thumb */
#wrap .panel1:hover .thumb, #wrap .panel1.cur .thumb { background-image: url(http://proloser.github.com/AnythingSlider/demos/images/th-slide-civil-1.jpg); }

/* panel 2 grey thumb */
#wrap .panel2 .thumb { background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-env-1.jpg); }
/* panel 2 color thumb */
#wrap .panel2:hover .thumb, #wrap .panel2.cur .thumb { background-image: url(http://proloser.github.com/AnythingSlider/demos/images/th-slide-env-1.jpg); }

/* panel 3 grey thumb...

JavaScript

$('#slider').anythingSlider({
    width: 300,
    height: 200,
    startStopped: true,
    navigationFormatter: function() {
        return '<div class="thumb"></div>';
    }
});«