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://cdn.jsdelivr.net/jwplayer/7.1.4/jwplayer.js"></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.anythingslider.video.js "></script>
<!-- Add stylesheets here -->
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">

<ul id="slider">
    <li><div id="container1"></div></li>
    <li><img src="http://placekitten.com/300/200" alt="" /></li>
    <li><div id="container2"></div></li>
    <li><img src="http://placehold.it/300x200" alt="" /></li>
    <li><img src="http://lorempixel.com/300/200" alt="" /></li>
</ul>

CSS

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

JavaScript

// Make a list of videos first
// ***********************
var flashplayer = "https://cdn.jsdelivr.net/jwplayer/7.1.4/jwplayer.flash.swf",
    videos = [];

// videos.push([ id, file, image, height, width ]);
videos.push([
    "container1",
    "http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",
    "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
    200,
    300
    ]);

// using the same video
videos.push([
    "container2",
    "http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",
    "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
    200,
    300
    ]);

// Set up players 
$.each(videos, function(i, v) {
    jwplayer(v[0]).setup({
        file: v[1],
        flashplayer: flashplayer,
        image: v[2],
        height: v[3],
        width: v[4]
    });
});

// Set up AnythingSlider
$('#slider').anythingSlider({

    // pause all videos when changing slides
    onSlideInit: function(e, slider) {
        if (jwplayer) {
            $.each(videos, function(i) {
                jwplayer(i).pause(true);
            });
        }
    },

    // Only play a paused video when a slide comes into view
    onSlideComplete: function(slider) {
        if (jwplayer) {
            $.each(videos, function(i, v) {
                // find ID in panel
                if (slider.$currentPage.find('#' + v[0]).length && jwplayer(v[0]).getState() === 'paused') {
                    jwplayer(v[0]).play();
                }
            });
        }
    },

    // *********** Video ***********
    // this DOES NOTHING because jwplayer is set up outside of AnythingSlider
    addWmodeToObject: "opaque",

    // return true if video is playing or false if not
    isVideoPlaying: function(slider) {
        if (jwplayer) {
            // jwplayer object is wrapped in #{id}_wrapper
            var vid = slider.$currentPage.find('[id$=_wrapper]'),
                jwid = (vid.length) ? vid.attr('id').replace(/_wrapper/, '') : '';
            if...