JSFiddle - React, Tailwind, and code Playground

by jsumners

HTML

<div id="output">
</div>

<div id="slides">
    <div id="slide0">
        <img src="http://www.tutorialpark.com/wp-content/uploads/3/Heart-Blending.jpg">
    </div>
    
    <div id="slide1">
        <img src="http://www.trying-to-conceive.com/wp-content/uploads/2010/04/heart.gif">
    </div>
</div>

CSS

#slides {
    display: none;
}

JavaScript

$(function() {
    var $output = $('#output'),
        $slides = $('#slides'),
        currentSlide = 0,
        intervalId;
    
    function updateOutput() {
        var $slide;
        
        // Move the slide currently being shown back to our storage area
        $slides.append($('#slide' + currentSlide));
        
        // Change the slide number
        currentSlide = (currentSlide + 1) % 2;
        
        // Select the new slide based on the new slide number
        $slide = $('#slide' + currentSlide);
        
        // Move the slide to the display area
        $output.append($slide);
    }
    
    intervalId = setInterval(updateOutput, 10000); // Every 10 seconds change the slide
    
    // On the first loading of the page, display the first slide.
    // Note that $.append() removes #slide0 from #slides and adds it to #output.
    $output.append($('#slide0'));
});