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="wrapper"><div class="centered">
    <ul id="slider">
        <li class="p1">
            <img src="http://placekitten.com/300/200" alt="" />
        </li>
        <li class="p2">
            <img src="http://placekitten.com/350/400" alt="" />
        </li>
        <li class="p3">
            <img src="http://placekitten.com/200/100" alt="" />
        </li>
        <li class="p4">
            <img src="http://placekitten.com/300/300" alt="" />
        </li>
        <li class="p5">
            <img src="http://placekitten.com/250/250" alt="" />
        </li>
    </ul>
</div></div>

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

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
/* added #slider li to make panels the same size in case "resizeContents" is false */
ul#slider, #slider li {
    height: 200px;
    list-style: none;
}

.p1 { width: 300px; height: 200px; }
.p2 { width: 350px; height: 400px; }
.p3 { width: 200px; height: 100px; }
.p4 { width: 300px; height: 300px; }
.p5 { width: 250px; height: 250px; }

#wrapper {
 height: 600px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

#wrapper:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

}
.centered {
  display: inline-block;
  vertical-align: middle;
  padding: 10px 15px;
}

JavaScript

$('#slider').anythingSlider({
    resizeContents : false
});


/*******************
 Centering CSS from
 http://css-tricks.com/14745-centering-in-the-unknown/
 *******************/