JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<ul class="cycle-slideshow" data-cycle-auto-height="4:3">
    <li><img src="http://malsup.github.com/images/p1.jpg"></li>
    <li><img src="http://malsup.github.com/images/p2.jpg"></li>
    <li><img src="http://malsup.github.com/images/p3.jpg"></li>
    <li><img src="http://malsup.github.com/images/p4.jpg"></li>
    <li><img src="http://malsup.github.com/images/p3.jpg"></li>
    <li><img src="http://malsup.github.com/images/p4.jpg"></li>
</ul>

CSS

.module {
    position: relative;
    text-align: center;
    background-color: #ffcccc;
}
.pager {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
}

.cycle-slideshow{
    display:block;
    position:relative;
    overflow:hidden;
    height:auto:
    clear:both;
}

.cycle-slideshow li{
    float:left;
    width: 200px;
    margin-left:20px;
    list-style:none;
    height:100%;
}

.cycle-slideshow li img{
    width:100%;
    height: auto;
    overflow:hidden;
}
}

JavaScript

$('.cycle-slideshow').cycle({
    allow-wrap:false,
    speed: 600,
    manualSpeed: 100,
    hide-non-active:false
});