JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/Rombecchi/jQuery-Mobile-Carousel/master/jquery.mobile.carousel.js"></script>
<script src="https://raw.github.com/Rombecchi/jQuery-Mobile-Carousel/master/jquery.ui.ipad.js"></script>
<div id="arrows">
    <a id="b-back" onclick="javascript:$('#carousel').carousel('previous');">&laquo;</a>
    <a id="b-forward" onclick="javascript:$('#carousel').carousel('next');">&raquo;</a>
</div>
<div class="carousel-container" id="carousel-container">
    <ul id="carousel" style="display:none">
        <li><div class="target_area_divs" style="background-color:#F00">Slide 1</div></li>
        <li><div class="target_area_divs" style="background-color:#0F0">Slide 2</div></li>
        <li><div class="target_area_divs" style="background-color:#00F">Slide 3</div></li>
        <li><div class="target_area_divs" style="background-color:#FF0">Slide 4</div></li>
        <li><div class="target_area_divs" style="background-color:#F0F">Slide 5</div></li>
        <li><div class="target_area_divs" style="background-color:#0FF">Slide 6</div></li>
    </ul>
</div>
<div id="navigator"></div>

<div onclick="javascript:$changewidth();">changeme</div>

CSS

.carousel-container {height: 200px; width: 290px; margin-top:0px;}
#carousel {list-style:none; clear:both; margin:0; padding:0;}
#carousel li {margin:0; padding:0;}

.target_area_divs {text-align:center; background-color:#FFF; height:100%;}
.target_area_divs img {height:100%; width:auto;}
.vertical {width:20px!important; margin-top:-200px; z-index:999; position:absolute; height:200px!important;}

#navigator {width: 290px; background-color:transparent; height:auto; text-align:center; overflow:hidden;}
#navigator span {width:8px; height:8px; display:inline-block; background:#CCC; margin:3px; border-radius:4px}
#navigator span.on {background:#000!important;}

#arrows {display:block; position:absolute; z-index:11000; left:0px; height:30px; width:290px; top:75px;}
#arrows a {width:30px; height:30px; display:inline-block; margin:0; padding-bottom:10px; text-align: center; font-face:Arial; font-size:28px; font-weight:bold; cursor:pointer; color:#000; }
#arrows #b-back {float:left;}
#arrows #b-forward {float:right;}

.verticalarr {width:30px!important; height:200px!important; left:145px!important; top:56px!important;}
#arrows.verticalarr a {display:block!important; margin-top:0px!important;}
#arrows.verticalarr #b-back {background:url('../images/btnup.png'); float:none!important;}
#arrows.verticalarr #b-forward {background:url('../images/btndown.png'); float:none!important; margin-top:140px!important;}

JavaScript

(function($) {
        $("#carousel").carousel({direction: "horizontal"});        
    })(jQuery);

function changewidth(){
    alert('uyes');
   // $(".carousel-container").css('width',500);
}