AnythingSlider playground

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

by Mottie

HTML

<link rel="stylesheet" href="https://css-tricks.github.io/AnythingSlider/css/anythingslider.css">
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/swfobject.js"></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.anythingslider.fx.js "></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.anythingslider.video.js "></script>
<div class="title">Click on slide #5 to see empty slide 3 & 4<br>slides #0, #2 &amp; #7 are preloaded (0 &amp; 7 are the cloned slides).</div><br>
    
<ul id="slider">
    <li><img src="" data-src="http://placekitten.com/g/300/200" alt="" /></li>   
    <li><img src="" data-src="http://placehold.it/300x200" alt="" /></li>
    <li><img src="" data-src="http://lorempixel.com/300/200/transport" alt="" /></li>
    <li><img src="" data-src="http://placebear.com/300/200" alt=""></li>
    <li><img src="" data-src="http://lorempixel.com/300/200/animals" alt=""></li>
    <li><img src="" data-src="http://placehold.it/300x200" alt="" /></li>
</ul>

<br>
<ul class="message"><li></li><li></li><li></li><li></li><li></li><li></li></ul>

CSS

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

ul#slider, ul#slider img {
  width: 300px;
  height: 200px;
  list-style: none;
}

.title,
.message {
  text-align: center;
}

b {
  color: red;
}

i {
  color: green;
}

JavaScript

// This part of the code is
// for demo purposes only
// *************************
var message = function(file, p, l) {
    var txt = l ? '<i>loading #' + p + '</i>' : '<b>preventing load #' + p + '</b>';
    // show loading message
    $('.message').append('<li>' + txt + ': ' + file + '</li>').find('li:first').remove();
};
// The code above is for this demo only
// *************************
// load image
var loadImg = function(slider, page) {
    slider.$items.eq(page).find('img').each(function() {
        if ($(this).attr('src') === '') {
            var newsrc = $(this).attr('data-src');
            $(this).attr('src', newsrc);

            // update loading message
            message(newsrc, page, true); // *** for demo only ***
        }
    });
};

$('#slider').anythingSlider({

    resizeContents: false,

    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        var start = slider.options.startPanel;
        // allow start & cloned panel images to load
        // the rest get the src removed.
        slider.$items.eq(start).siblings(':not(.cloned)').find('img').each(function() {
            var $el = $(this);
            $el.attr('src', function(i, src) {
                if (src !== '') {
                    $el.attr('data-src', src);

                    // update loading message
                    message(src, i + 1, false); // *** for demo only ***
                }
                return '';
            });
        });
        // load current image
        loadImg(slider, slider.currentPage);
        // load first cloned slide #0
        loadImg(slider, 0);
        // load last cloned slide #6
        loadImg(slider, slider.pages+1);
        // trigger slide complete to preload the next slide image
        slider.$el.trigger('slide_complete', slider);

    },

    // Callback when slide initiates, before control animation
    onSlideInit: function(e, slider) {
     ...