JSFiddle - React, Tailwind, and code Playground

HTML

<div class="noticias">
    <div id="noticia1" class="noticia-container">Noticia 1</div>
    <div id="noticia2" class="noticia-container">Noticia 2</div>
    <div id="noticia3" class="noticia-container">Noticia 3</div>
</div>
<div id="hello"></div>

CSS

.noticia-container {
    display: none;
}

JavaScript

$(function () {
    var tiempoDesaparecer = 500;
    var tiempoAparecer = 500; 
    var duracion = 2000;
    var intervalo = duracion + tiempoAparecer + tiempoDesaparecer;
    $(".noticia-container").first().show();
    length = $(".noticia-container").length;
    var prev = 0;
    var next = 1;
    var slide = function () {
        $(".noticia-container").eq(prev).fadeOut(tiempoAparecer, function () {
            $(".noticia-container").eq(next).fadeIn(tiempoDesaparecer);
            prev = next;
            next = (next == length - 1) ? 0 : ++next;
        });
    };
    var slideShow = setInterval(slide, intervalo);
    $(".noticia-container").hover(function() {
        clearInterval(slideShow);
    }, function() {
        slideShow = setInterval(slide, intervalo);
    });
});