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="slider_holder">
    <ul id="slider">
        <li class="panel1">
            <iframe src="http://player.vimeo.com/video/55968550?title=0&byline=0&portrait=0" width="984" height="554" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </li>
        <li class="panel2">Photo #1</li>
        <li class="panel3">Photo #2</li>
        <li class="panel4">Photo #3</li>
        <li class="panel5">Photo #4</li>
    </ul>
</div>

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

JavaScript

/* play video when it comes into view, even after it has completed */
$.fn.anythingSliderVideo.services.vimeo1.cont = function(base, $vid, index) {
    base.video.postMsg('{"method":"play"}', $vid[0].id);
};

$(function () {
    $('#slider')
    .anythingSlider({
        resizeContents: true,
        navigationFormatter: function (index, panel) {
            return ['Promo Video', 'Photo #1', 'Photo #2', 'Photo #3', 'Photo #4'][index - 1];
        },
        startPanel: 1,
        autoPlay: true,
        delay: 5000
    })
    .anythingSliderVideo({
        wmode: 'transparent&autoplay=1' // (hack) add autoplay code here
    });
});