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>
    <iframe src="https://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
  </li>
  <li>
    <iframe src="https://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
  </li>
</ul>

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: 300px;
  height: 200px;
  list-style: none;
}

.swipe-overlay {
  /* un-comment the background color out so you
       can see the size of the swipe band */
  /* background: #800; */
  position: absolute;
  width: 300px;
  height: 50%;
  top: 25%;
  left: 0;
  z-index: 100;
}

JavaScript

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