JSFiddle - React, Tailwind, and code Playground

by Sam G

HTML

<div id="quotes_container">
    <div class="quotes">A</div>
    <div class="quotes">B</div>
    <div class="quotes">C</div>
    <div class="quotes">D</div>
    <div class="quotes">E</div>
    <div class="quotes">F</div>
    <div id="dots"></div>
</div>

CSS

#quotes_container {
    position: relative;
    width: 320px;
    height: 60px;
    margin: 0 auto;
    padding: 20px;
    background-color: green;
}
.quotes {
    display: none;
    text-align: center;
    padding: 10px;
    color: white;
    font-weight: bold;
}
#dots {
    position: absolute;
    bottom: 5px;
    left: 25%;
    text-align: center;
    width: 50%;
}
.dot {
    display: inline-block;
    font-size: 48px;
    font-weight: bold;
    color: black;
    margin-left: 10px;
    transition: color 600ms ease-in-out;
    cursor: pointer;
}
.dot.active {
    color: white;
}

JavaScript

var quotes = $(".quotes");
var quoteIndex = -1;

for (var i = 0; i < quotes.length; i++) {
    $('#dots').append($('<span/>').addClass('dot').text("."));
}

function showNextQuote() {
    ++quoteIndex;
    $('.dot.active').removeClass('active');
    $('.dot').eq(quoteIndex % quotes.length).addClass('active');
    quotes.eq(quoteIndex % quotes.length)
    .fadeIn(600)
    .delay(4000)
    .fadeOut(600, showNextQuote);
}
showNextQuote();

$('.dot').on('click', function() {
    $('.dot.active').removeClass('active');
    clicked = true;
    $(this).addClass('active');
    quoteIndex = $(this).index()-1;
    $('.quotes').hide();
    $('.quotes').eq($(this).index()).show();
});