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>
<ul id="slider">
    <li>
        <div>
            <input type="checkbox" tabindex="-1"/> 1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim ligula, auctor sed dictum a, elementum nec nunc.</div>
    </li>
    <li>
        <div>
            <input type="checkbox" tabindex="-1" /> 2) Proin nec sem turpis, in blandit leo. Cras eu ornare justo. Praesent molestie ligula nec dolor tempor bibendum.</div>
    </li>
    <li>
        <div>
            <input type="checkbox" tabindex="-1" /> 3) Vivamus magna dui, porttitor ac ornare nec, vulputate sed metus. Maecenas a nisl nisl, at eleifend est.</div>
    </li>
    <li>
        <div>
            <input type="checkbox" tabindex="-1" /> 4) Pellentesque sit amet ipsum diam, ut vehicula purus. Etiam vehicula odio eu magna molestie sed consectetur lorem condimentum.</div>
    </li>
    <li>
        <div>
            <input type="checkbox" tabindex="-1" /> 5) Vestibulum in orci sed neque luctus tristique. Praesent at risus lacus. Donec enim ligula, auctor sed dictum a, elementum nec nunc.<br>
            <br>
            <button class="submit" tabindex="-1">Submit</button>
        </div>
    </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;
}
ul#slider li div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
}
.submit { display: none; }

JavaScript

$('#slider')
    .anythingSlider({
        infiniteSlides: false,
        stopAtEnd: true,
        enableKeyboard: false,
        buildNavigation: false,
        buildStartStop: false,
        buildArrows: true,
        // Callback when the plugin finished initializing
        onInitialized: function (e, slider) {
            slider.$forward.add(slider.$back).hide();
        },
        onSlideBegin: function(e, slider){
            var dir = slider.targetPage > slider.currentPage,
                $prev = dir ? slider.$currentPage : slider.$currentPage.prev(),
                $next = dir ? slider.$currentPage.next() : slider.$targetPage,
                backBtn = slider.targetPage !== 1 && $prev.find('input:checkbox').is(':checked'),
                fwdBtn = slider.targetPage !== slider.pages && $next.find('input:checkbox').is(':checked')
            slider.$back.toggle( backBtn );
            slider.$forward.toggle( fwdBtn );
        }
    })
    .on('change', 'input:checkbox', function(){
        var slider = $('#slider').data('AnythingSlider'),
            checked = $(this).is(':checked');
        slider.$forward.toggle( slider.currentPage < slider.pages && checked );
        slider.$back.toggle( slider.currentPage > 1 );
        $('.submit').toggle( slider.currentPage === slider.pages && checked );
    });