AnythingSlider playground

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

by Mottie

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

<!-- Add stylesheets here -->
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/theme-metallic.css">
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
#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: 0;
}

/* 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);
    float: right;
    position: absolute;
    bottom: 0;
    left: 60px; /* this left value includes the width of the left arrow (45px) */
    width: 270px;
}

#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;
}

JavaScript

$('#slider').anythingSlider({
    
    toggleControls : true,
    
    navigationSize: 3,
    
    navigationFormatter: function(i, panel) {
        
        var url = 'http://proloser.github.com/AnythingSlider/demos/images/th-slide-',
        thumbs = ['civil-1', 'env-1', 'civil-2', 'env-2', 'civil-1', 'env-1', 'civil-2', 'env-2'];
        return '<img src="' + url + thumbs[i - 1] + '.jpg">';
    }

});