AnythingSlider playground

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

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>
<br>
<br>
<ul id="slider1">
    <li>
        <img src="http://placekitten.com/300/200" alt="" />
    </li>
    <li>
        <img src="http://placehold.it/300x200" alt="" />
    </li>
    <li>
        <img src="http://placebear.com/300/200" alt="" />
    </li>
    <li>
        <img src="http://lorempixel.com/300/200" alt="" />
    </li>
    <li>
        <img src="http://placedog.com/300/200" alt="" />
    </li>
</ul>
<div class="spacer"></div>
<ul id="slider2">
    <li>
        <img src="http://placekitten.com/300/200" alt="" />
    </li>
    <li>
        <img src="http://placehold.it/300x200" alt="" />
    </li>
    <li>
        <img src="http://placebear.com/300/200" alt="" />
    </li>
    <li>
        <img src="http://lorempixel.com/300/200" alt="" />
    </li>
    <li>
        <img src="http://placedog.com/300/200" alt="" />
    </li>
</ul>
<div class="spacer"></div>

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/

/* added #slider li to make panels the same size in case "resizeContents" is false */
 ul#slider1, ul#slider2 {
    width: 300px;
    height: 200px;
    list-style: none;
}
.spacer {
    height: 800px;
}

JavaScript

$(function () {
    $('#slider1, #slider2')
    .anythingSlider({
        // Callback when the plugin finished initializing
        onInitialized: function (e, slider) {
            //$('#slider1').data('AnythingSlider').makeActive();
        }
    })
    .bind('inview', function (event, visible) {
        if (visible) {
            $(this).data('AnythingSlider').makeActive();
        }
    });
});

/**
 * author Remy Sharp
 * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/
 */ (function ($) {
    function getViewportHeight() {
        var height = window.innerHeight; // Safari, Opera
        var mode = document.compatMode;

        if ((mode || !$.support.boxModel)) { // IE, Gecko
            height = (mode == 'CSS1Compat') ? document.documentElement.clientHeight : // Standards
            document.body.clientHeight; // Quirks
        }

        return height;
    }

    $(window).scroll(function () {
        var vpH = getViewportHeight(),
            scrolltop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop),
            elems = [];

        // naughty, but this is how it knows which elements to check for
        $.each($.cache, function () {
            if (this.events && this.events.inview) {
                elems.push(this.handle.elem);
            }
        });

        if (elems.length) {
            $(elems).each(function () {
                var $el = $(this),
                    top = $el.offset().top,
                    height = $el.height(),
                    inview = $el.data('inview') || false;

                if (scrolltop > (top + height) || scrolltop + vpH < top) {
                    if (inview) {
                        $el.data('inview', false);
                        $el.trigger('inview', [false]);
                    }
                } else if (scrolltop < (top + height)) {
                    if (!inview) {
                        $el.data('inview', true);
        ...