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 slides 2 through 4
  <br>slides #0 &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);
  },

  // Callback when slide initiates, before control animation
  onSlideInit: function(e, slider) {
    // preload the targeted page image
    loadImg(slider, slider.targetPage);
  }

});