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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<ul id="slider">
    
    <li class="panel1">
        <div class="accordion">
            <h3><a href="#">Section 1</a></h3>
            <div>
                <p>
                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
                </p>
            </div>
            <h3><a href="#">Section 2</a></h3>
            <div>
                <p>
                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. Vestibulum a velit eu ante scelerisque vulputate. Morbi eget metus nec nibh facilisis rutrum vitae eu elit. Donec eu diam massa. Vestibulum iaculis sollicitudin nisl eu pretium. Cras at feugiat lectus.
                </p>
            </div>
            <h3><a href="#">Section 3</a></h3>
            <div>
                <p>
                    Suspendisse non lectus at libero commodo ullamcorper. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec...

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
ul#slider {
    width: 400px;
    height: 200px;
    list-style: none;
}

JavaScript

// adjust height of AnythingSlider
var adjustHt = function(tar) {
    // animate the slider height to match the accordion height
    var newHt = 4,
        // adding a little padding to make it purdy
        num = tar.index(),
        // target page index
        hts = tar.find('.accordion').children(':visible').map(function(i, e) {
            return (newHt += $(e).outerHeight());
        }).get();
    // change height for plugin to prevent height jumping when changing slides
    $('#slider').data('AnythingSlider').panelSize[num][1] = newHt;
    // animate height of slider, window and panel
    $('.anythingSlider, .anythingWindow, .panel').animate({
        height: newHt
    }, 500);
};

// Initialize accordion and add callback
$(".accordion").accordion({
    autoHeight: false,
    change: function(event, ui) {
        // adjust AnythingSlider height when a new accordion is open
        adjustHt(ui.newHeader.closest('.panel'));
    }
});

$('#slider').anythingSlider({

    resizeContent: false,

    // Details at the top of the file on this use (advanced use)
    navigationFormatter: function(index, panel) {
        // This is the default format (show just the panel index number)
        return ['Section 1-3', 'Section 4-5', 'Section 6-7', 'Section 8-9'][index - 1];
    },

    // if false, the slider will not wrap
    infiniteSlides: false,

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        adjustHt(slider.$currentPage);
    },

    // Callback when slide initiates, before control animation
    onSlideInit: function(e, slider) {
        adjustHt(slider.$targetPage);
    }

});