AnythingSlider playground

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

by erick

HTML

<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>
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-minimalist-round.css">
<div id="wrapper">
    <ul id="slider">
        
        <li>
            <div>
                <img src="http://placekitten.com/300/200" alt="" />
            </div>
        </li>
        
        <li>
            <div>
                <img src="http://placehold.it/300x200" alt="" />
            </div>
        </li>
        
        <li>
            <div>
                <img src="http://ipsumimage.appspot.com/300x200.png" alt="" />
            </div>
        </li>
        
        <li>
            <div>
                <img src="http://dummyimage.com/300x200/000/fff.jpg" alt="" />
            </div>
        </li>
        
        <li>
            <div>
                <img src="http://placedog.com/300/200" alt="" />
            </div>
        </li>
        
    </ul>
</div>
<!-- Add stylesheets here -->
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/theme-minimalist-round.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+ ***/
/* added #slider li to make panels the same size in case "resizeContents" is false */
#slider, #slider li {
    width: 300px;
    height: 200px;
    list-style: none;
}

#slider img {
    width: 80%;
    height: 350px;
    padding: 25px 10%;
}

#wrapper { height: 400px; }

body { padding: 0; }
div.anythingSlider.anythingSlider-minimalist-round { padding: 0; }

JavaScript

$('#slider').anythingSlider({

    // *********** Appearance ***********
    // Theme name; choose from: minimalist-round, minimalist-square, metallic, construction, cs-portfolio
    theme: 'minimalist-round',
    // If true, the entire slider will expand to fit the parent element
    expand: true

});