JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="slideshow">
    <div class="slide current">
        <h3>1</h3>
        <p>Eu aenean dis augue etiam quis enim magna, dignissim, sociis! Vel ridiculus. Etiam adipiscing natoque sociis vel massa. Placerat amet ac! In! Mus non, integer egestas placerat quis. Sit tincidunt habitasse a montes et est mid egestas pulvinar nec in nascetur nascetur?</p>
</div>
<div class="slide">
        <h3>2</h3>
        <p>Eu aenean dis augue etiam quis enim magna, dignissim, sociis! Vel ridiculus. Etiam adipiscing natoque sociis vel massa. Placerat amet ac! In! Mus non, integer egestas placerat quis.</p>
</div>
<div class="slide">
        <h3>3</h3>
        <p>Eu aenean dis augue etiam quis enim magna, dignissim, sociis! Vel ridiculus. Etiam adipiscing natoque sociis vel massa. Placerat amet ac! In! Mus non, integer egestas placerat quis. Sit tincidunt habitasse a montes et est mid egestas pulvinar nec in nascetur nascetur?</p>
</div>
</div>

CSS

#slideshow {
    width: 40em;
    margin: 2em auto;
    border: 5px double #ccc;
    background: #eee;
    box-shadow: 1px -1px 2px #ddd, -1px 1px 2px #ddd;
    height: 20em;
}

#slideshow div.slide {
    width: 100%;
    height: 100%;
    display: none;
}

h3 {
    font-size: 1.8em;
    text-align: center;
    margin-top: 1em;
}

p {
    line-height: 1.3;
    width: 70%;
    margin: 0.4em auto 0 auto;
    font: 90% Arial, sans-serif;
}

#slideshow div.current {
    display: block;
}

JavaScript

function autoSlide() {
    var nextidx = (parseInt($('#slideshow .current').index() + 1) == $('#slideshow .slide').length) ? 0 : parseInt($('#slideshow .current').index() + 1);
    $('#slideshow .current').fadeOut('slow', function() {
        $(this).removeClass('current');
        $('#slideshow .slide').eq(nextidx).fadeIn('slow', function() {
            $(this).addClass('current');
        });
    });
}

setInterval(autoSlide, 2000);