JSFiddle - React, Tailwind, and code Playground

by tweissin

HTML

<div class="thumbnail">
    <div class="image">
        <img src="http://lorempixel.com/100/100/animals/0" data-n="1" class="loaded"/>
    </div>
    <h1>title</h1>
    <p>description</p>
</div>

CSS

.thumbnail{
    width:100px;
    padding:10px;
    webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
}
.thumbnail .image, img{
    width:100px;
    height:100px;
}
.thumbnail .image{
    overflow:hidden;
    position:relative;
}

.thumbnail .image img{
    position:absolute;
    top:0;
    left:0;
    display:none;
}

.thumbnail .image img:first-child{
    display:block;
}
}

JavaScript

jQuery(function($){
    var baseSRC = 'http://lorempixel.com/100/100/animals/';
    var maxCount = 6;
    var loadTimer = null;
    var currentHovered = null;
    var currentLoaded = null;
    var currentCount = null;
    var firstImage = null;
    var currentImage = null;
    var nextImage = null;
    
    var swapImages = function(){
        var go = function(){
            if(currentImage.is(nextImage)){return;}
            currentImage.fadeOut(300,
                function(){currentImage = nextImage;}
            );
            nextImage.fadeIn(300);
            startTimer();
        };
        nextImage = currentImage.next('.loaded');
        if(!nextImage.length){
            if(currentCount == maxCount){
                currentCount = 0;
                nextImage = firstImage;
                return go();
            }
            var img = $('<img data-n="'+currentLoaded+'">');
            img.on('load',function(){
                currentLoaded++;
                $(this).addClass('loaded');
            })
            img.attr('src',baseSRC+(currentLoaded+1));
            img.insertAfter(currentImage);
            currentCount = 0;
            nextImage = firstImage;
            return go();
        }
        currentCount++;
        go();
    }
    
    var startTimer = function(){
        clearTimeout(loadTimer);
        loadTimer = setTimeout(swapImages,1000)
    }
    
    var next = function(thumb){
        currentHovered = thumb;
        currentLoaded = thumb.data('loaded') || 0;
        currentCount = thumb.data('count') || 0;
        firstImage = currentImage = thumb.find('img').first();
        startTimer();
    }
    
    var stop = function(thumb){
        currentHovered.data('loaded',currentLoaded);
        currentHovered.data('count', currentCount);
        currentHovered = null;
        clearTimeout(loadTimer);
    }
    
    $('.thumbnail')
        .on('mouseenter',function(){next($(this));})
       ...