JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <figure> <!--vazio pois o script atua com troca de bg--> </figure>
    <div> <a href="#" id="setaleft">&nbsp;<</a> <a href="#" id="setaright">>&nbsp;</a> </div>
    <h1 id="tit"> <!-- definido no js --> </h1>
</section>

CSS

/* estilo fixo do slider */
/* ps: estilos de efeito no final */

    section {
        position:relative;
        max-width:300px; height:100px;
        margin:0 auto;
        color:#fff;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    section:hover #setaleft, section:hover #setaright{
        opacity:1;
    }
        section figure {
            padding:0; margin:0;
            background-color:#33fd3f;
            background-position: center;
            background-size:90px;
            background-repeat:no-repeat;
            width:100%; height:100%;
            position:absolute; 
        }
        section div {
            position:absolute;
            top:30%;
            width:100%;
            margin:0 auto;
        }
            section div a{
                font-size:1.8em;
                text-decoration:none;
                color:#fff;
                opacity:0.5;
                transition:0.5s;
            }
            section div :last-child{
                float:right;
            }
        section h1 {
            position:absolute;
            opacity:0;
            bottom:-5px;
            left:100px;
            font-size:1em;
        }

/* estilos(classes) de efeito */

    /* configurações de slides */
    .slide1{
        background-color:#47ba38; /* verde */
        background-image:url(http://4.ii.gl/Bnm_U8ns.png);
        transition: 1s;
    }
    .slide2{
        background-color:#386aba; /* azul */
        background-image:url(http://2.ii.gl/bd_ON1d34.png);
        transition: 1s;
    }
    .slide3{
        background-color:#f26b08; /* laranja */
        background-image:url(http://2.ii.gl/Nu3rNdWnD.png);
        transition: 1s;
    }
    
    .sliderfect{
        opacity: 1 !important;
        left: 5px !important;
        transition: 1s !important;
    }

JavaScript

var imgs_title = [ 
    ["slide1","slide2","slide3"],
    ["Titulo do primeiro slide", "Titulo do segundo slide", "Titulo do terceiro slide"] 
];
var imagem = document.querySelector('section figure');
var titulo = document.querySelector('section h1');
var caption = document.getElementById('tit');
var count = 0;

imagem.className = imgs_title[0][0];
titulo.innerHTML = imgs_title[1][0];

function rodarslider(){
    if(count == 2) { 
        count = 0; 
        imagem.className = imgs_title[0][0]; 
        titulo.innerHTML = imgs_title[1][0];
        return false; 
    }
    imagem.className = imgs_title[0][count+1];
    titulo.innerHTML = imgs_title[1][count+1];
    caption.classList.add('sliderfect');
    setTimeout(function(){ caption.classList.remove('sliderfect'); },1200);
    count++;
}

function voltarslider(){
    if(count == 0) { 
        count = 2; 
        imagem.className = imgs_title[0][2]; 
        titulo.innerHTML = imgs_title[1][2];
        return false; 
    }
    imagem.className = imgs_title[0][count-1];
    titulo.innerHTML = imgs_title[1][count-1];
    caption.classList.add('sliderfect');
    setTimeout(function(){ caption.classList.remove('sliderfect'); },1200);
    count--;
}

document.getElementById('setaright').addEventListener('click', rodarslider, false);
document.getElementById('setaleft').addEventListener('click', voltarslider, false);