JSFiddle - React, Tailwind, and code Playground

HTML

<section id = "noticias">
    <img src = "http://keia.org/sites/default/files/news_4.jpg" class = "noti" />
    <img src = "http://millennialmarketing.com/wp-content/uploads/2010/04/breaking-news.jpg" class = "noti" />
    <img src = "http://www.brickbodies.com/wp-content/uploads/2011/09/NewsPaper.jpg" class = "noti" />
    <img src = "http://www.bisd.us/Keller/newspaper1.gif" class = "noti" />
    <img src = "http://cjibalears.org/sites/default/files/noticias.png" class = "noti" />
    <img src = "http://www.fella-werke.de/media/images/News_765x350px.jpg" class = "noti" />
</section>

CSS

*{
    transition: all .7s ease;
}

#noticias{
    width: 40em;
    height: 10em;
    position: absolute;
    margin: -6em 0 0 -25em;
    top: 50%;
    left: 50%;
    border: .1em #002 solid;
    padding: 2em 0 0 8em;
}

.noti{
    display: inline-block;
    opacity: 0;
    width: 15em;
    height: 8em;
    position: absolute;
}

JavaScript

var noticias = $(".noti"),
    total = noticias.length,
    cont = 0;

$(noticias).eq(cont).css({"position": "relative", "opacity": 1});
$(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1});

var slider = {
    show: function(){
        $(noticias).eq(cont).css({"position": "absolute", "opacity": 0});
        $(noticias).eq(cont + 1).css({"position": "absolute", "opacity": 0});
        
        cont = cont + 2 == total ? 0 : cont + 2;
      
        $(noticias).eq(cont).css({"position": "relative", "opacity": 1});
        $(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1});
    }
};

setInterval(slider.show, 5000);