JSFiddle - React, Tailwind, and code Playground

by Dim13i

HTML

<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<section class="slideshow">
    <div class="pause">| |</div>
    <img src="http://dimitri.swift.lu/test/gallery/images/loader.gif" width="50" class="loader" />
    <ul>
        <li><img src="http://dimitri.swift.lu/test/gallery/images/slide-1.jpg" /></li>
        <li>
            <video controls id="video1" preload>
                <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
            </video>
        </li>
        <li><img src="http://dimitri.swift.lu/test/gallery/images/slide-3.jpg" /></li>
        <li><img src="http://dimitri.swift.lu/test/gallery/images/slide-4.jpg" /></li>
        <li><img src="http://dimitri.swift.lu/test/gallery/images/slide-5.jpg" /></li>
    </ul>
</section>

CSS

.slideshow {
    width: 700px;
    height: 300px;
    background: #efefef;
    position: relative;
    background: white;
    box-shadow: 0px 0px 5px black;
    margin: 20px auto;
}

.slideshow ul {
    width: 100%;
    height: 100%;
    position: relative;
    list-style: none;
    overflow: hidden;
    display: none;
}

.slideshow ul li {
    position: absolute;
    left: 100%;
}

.slideshow ul li:first-child {
    left: 0%;
}

video {
    background: #434343;
}

.loader {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

.pause {
    display: none;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    z-index: 100;
    line-height: 50px;
    text-align: center;
    font-size: 1.0em;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

JavaScript

// Some variables
var timer;
var sWidth = 400, sHeight = 200, border = 10;
var slideshowSet = false;
var video;
var videoSet = false;
var slidePause = false;
var $el;
var $currentEl = $('.slideshow').find('li').eq(0);

// On document ready
$(function() {
    // Set slideshow dimensions + border
    setSlideDimensions(sWidth, sHeight, border);
    
    // Show pause button
    $('.slideshow').hover(
        function(){
            if(slideshowSet) {
                $('.pause').stop().fadeIn(200);
            }
        },
        function() {
            if(slideshowSet) {
                $('.pause').fadeOut(200);
            }
        }
    );
    
    // Pause button
    $('.pause').click(function() {
         if($(this).text() == '| |') {
            // Pause slideshow
            slidePause = true;
            $(this).text('â–ş');
            clearTimeout(timer);
            if($currentEl.find('video').size() == 1){
                video.pause();
            }
        } else {
            // Play slideshow
            $(this).text('| |');
            if($currentEl.find('video').size() == 1){
                video.play();
            } else {
                timer = setTimeout(slide, 2000);
            }
        }
    });
});

// Window ready (all images loaded, but not videos!!)
$(window).ready(function() {
    // Hide loader GIF
    $('.loader').fadeOut(200);
    
    // Show slideshow
    $('.slideshow ul').fadeIn(200);

    // Start slideshow
    $el = $('.slideshow').find('li');
    timer = setTimeout(slide, 2000);
    slideshowSet = true;
});

// Function to slide
function slide() {
    videoSet = false;
    $el = $('.slideshow').find('li');
    $el.eq(1).add($el.eq(0)).animate({'left': '-='+sWidth}, {queue: false, duration: 300, complete: function() {
        $el.eq(0).animate({'left': '100%'}, 0);
        $currentEl = $el.eq(1);
        if($(this).index() == 1){
            $('.slideshow ul').append($el.eq(0));

            // We chek if it's a video
     ...