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>
<ul id="slider">
    
    <li><div><img src="http://placekitten.com/150/150" alt="" /></div></li>
    
    <li><div><img src="http://placehold.it/120x100" alt="" /></div></li>
       
    <li><div><img src="http://lorempixel.com/100/150" alt="" /></div></li>
    
    <li><div><img src="http://placebear.com/110/130" alt="" /></div></li>
    
</ul>

<!-- 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, ul#slider li {
    width: 200px;
    height: 160px;
    list-style: none;
}

/*
  centering css from here: 
  http://css-tricks.com/centering-in-the-unknown/
*/
ul#slider div {
    text-align: center;
}
ul#slider div:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;

}
ul#slider img {
  display: inline-block;
  vertical-align: middle;
}

JavaScript

$('#slider').anythingSlider();

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

 Images that are too big for the viewport will shift
 out of view!
 *******************/