JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<!--Container-->
    <div class="visual-area">
        <div class="carousel">
        <ul>
            <li class="off image_0" data-image="0">
                <img src="http://placehold.it/600x500/ff0000">
            </li>
            <li class="off image_1" data-image="1">
                <img src="http://placehold.it/600x500/00ff00">
            </li>
            <li class="off image_2" data-image="2">
                <img src="http://placehold.it/600x500/0000ff">
            </li>
            <li class="on image_3" data-image="3">
                <img src="http://placehold.it/600x500/00ffff">
            </li>
        </div>
        </ul>
    </div>
 <a href="#" class="next">next</a>

CSS

.wrapper{
    display:block;
}
.visual-area{
    margin: 0 auto;
    width:600px;
}

.carousel ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: relative;
}

/* Required for `li` */
.carousel > ul > li {
    position: absolute;
    top: 20px;
    left: 20px;
    float: left;
    border: 1px solid red;
}

.carousel > ul > li.off {
    opacity: 0;
   transition: opacity 0.2s linear;
   -webkit-transition: opacity 0.2s linear;

}

.carousel > ul > li.on {
    opacity: 1;
   transition: opacity 0.2s linear;
   -webkit-transition: opacity 0.2s linear;
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
}

JavaScript

$(document).ready(function(){

// click function on the next link
$('.next').on('click',function() {
    $('ul > li').each(function(i, el) {
        if ($(el).hasClass('on')) {
            var num = $(el).data('image');
            if ($('.image_' + (num+1)).length > 0) {
                next = num+1;
            } else {
                next = 0;
            }
        }    
    }).promise().done(function() {
        
        $('.carousel > ul > li').removeClass('on').addClass('off');
        $('li.image_' + next).removeClass('off').addClass('on');
        
    });
    
   });

});