JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<div id="feature-carousel">
    <div class="carousel-story">
        <h2>Wow</h2>
        <p>Here is a boring summary.</p>
    </div>
    <div class="carousel-story">
        <h2>I Can't Bear It</h2>
        <p>Once upon a time, there was a big bear who hated honey. The rest of the bears were suspicious of this bear, for obvious reasons. Read More...</p>
    </div>
    <div class="carousel-story">
        <h2>Coconuts</h2>
        <p>Coconuts are the true food of the gods. Whoever said it was ambrosia clearly had never had coconuts.</p>
</div>

CSS

#feature-carousel {
    border: 1px solid #d5d5d5;
    padding: 0;
    margin-top: 10px;
    width: 22em;
    position: absolute;
    overflow: hidden;
}

.carousel-story {
    font-family: "Times New Roman", Times, serif;
    padding: 0.5em;
    background: #fff;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #eee;
}

.carousel-story h2 {
    font-size: 2em;
    font-weight: normal;
}

.carousel-story img {
    float: left;
    margin-right: 1em;
}

.carousel-story p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
}

JavaScript

// Working carousel

var maxHeight = 0;
var storyTopZ = 500;
var timer;
var rotateDelay = 5000;

$('.carousel-story').each(function(i) {
    if ($(this).outerHeight() > maxHeight)
        maxHeight = $(this).innerHeight();
});

$('#feature-carousel').css('height', maxHeight);
$('.carousel-story').css('height', maxHeight);

$('.carousel-story').click(function() {
    $(this).fadeOut();
});

function rotate() {
    var $nextStory;
    var $topStory = $('.carousel-story').filter(function() {
        return $(this).css('z-index') == storyTopZ;
    });
    
    $topStory.animate({
        'opacity': 0
    }, 1000, function() {
        $(this).css('z-index', 0);
        $(this).css('opacity', 1);
        $nextStory.css('z-index', storyTopZ);
    });
    
    // while the above is animating, figure out
    // the next div in line
    
    $nextStory = $('.carousel-story:animated').next('.carousel-story');
    if ($nextStory.length == 0)
        $nextStory = $('.carousel-story:first');
    
    $nextStory.css('z-index', storyTopZ - 1);
}

$('.carousel-story:first').css('z-index', storyTopZ);
timer = setInterval(rotate, rotateDelay);

$('#feature-carousel').mouseenter(function() {
    clearInterval(timer);
});

$('#feature-carousel').mouseleave(function() {
    timer = setInterval(rotate, rotateDelay);
});