JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='slogan_switch'>
            <li class='slogan_switch_item' id='1'>
                <div class='ssi_arrow_inactive'><div class='ssi_arrow_active'></div></div>
                <div class='ssi_text_left'></div>
                <div class='ssi_text_body'>Test Text</div>
                <div class='ssi_text_right'></div>
            </li>
            <li class='slogan_switch_item active' id='2'>
                <div class='ssi_arrow_inactive'><div class='ssi_arrow_active'></div></div>
                <div class='ssi_text_left'></div>
                <div class='ssi_text_body'>New Test Text</div>
                <div class='ssi_text_right'></div>
            </li>
            <li class='slogan_switch_item' id='3'>
                <div class='ssi_arrow_inactive'><div class='ssi_arrow_active'></div></div>
                <div class='ssi_text_left'></div>
                <div class='ssi_text_body'>New Test Text 2</div>
                <div class='ssi_text_right'></div>
            </li>
            <li class='slogan_switch_item' id='4'>
                <div class='ssi_arrow_inactive'><div class='ssi_arrow_active'></div></div>
                <div class='ssi_text_left'></div>
                <div class='ssi_text_body'>New 2</div>
                <div class='ssi_text_right'></div>
            </li>
        </ul>

CSS

#slogan_switch{
position:absolute;
top:10px;
overflow:hidden;
list-style-type:none;
}
.slogan_switch_item{
margin-left:-20px;
margin-bottom:10px;
height:32px;
}
.slogan_switch_item.active{
margin-left:0px;
}
.ssi_arrow_inactive{
height:32px;
width:40px;
float:left;
background:url(http://www.uniground.net/jstest/slogan_title_arrow_inactive.png) 0% 0% no-repeat;
}
.ssi_arrow_active{
height:32px;
width:40px;
float:left;
background:url(http://www.uniground.net/jstest/slogan_title_arrow_active.png) 0% 0% no-repeat;
}
.ssi_text_left{
float:left;
width:10px;
height:32px;
background:url(http://www.uniground.net/jstest/slogan_title_text_left.png) 0% 0% no-repeat;
}
.ssi_text_body{
float:left;
height:32px;
background:url(http://www.uniground.net/jstest/slogan_title_text_body.png) 0% 0% repeat-x;
font-weight:600;
color:#fff;
font-size:18px;
line-height:30px;
padding:0px 5px;
}
.ssi_text_right{
float:left;
width:10px;
height:32px;
background:url(http://www.uniground.net/jstest/slogan_title_text_right.png) 0% 0% no-repeat;
}

JavaScript

$('.slogan_switch_item:not(.active)').find('.ssi_text_left, .ssi_text_body, .ssi_text_right, .ssi_arrow_active').css({ opacity: 0 });
$(".slogan_switch_item:not(.active)").hover(function(){
    $(this).stop(true, true).animate({marginLeft:"0px" }, "fast");
    $(this).stop(true, true).find('.ssi_text_left, .ssi_text_body, .ssi_text_right, .ssi_arrow_active').animate({"opacity": "1"}, "fast"); 
    $("#slogan_switch").find(".active").stop(true, true).find('.ssi_text_left, .ssi_text_body, .ssi_text_right, .ssi_arrow_active').animate({"opacity": "0"}, "fast");
    $("#slogan_switch").find(".active").stop(true, true).animate({marginLeft:"-20px" }, "fast");
    $(".slogan_switch_item.active").removeClass('active');
    $(this).addClass('active');
}, function(){
    
});