JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div class="container-fluid main-slide">
    <div class="cycle-slideshow">
        <img src="http://lorempixel.com/1000/150/sports/1/Dummy-Text" />
        <img src="http://lorempixel.com/1000/150/sports/2/Dummy-Text" />
        <img src="http://lorempixel.com/1000/150/sports/3/Dummy-Text" />
        <img src="http://lorempixel.com/1000/150/sports/4/Dummy-Text" />
    </div>
</div>

CSS

.cycle-slideshow {
    position: relative;
    overflow: hidden;
}
.cycle-slideshow img {
    position: absolute;
    top: 0;
    /* center horizontally */
    left: -1000px !important;
    right: -1000px !important;
    margin-left: auto;
    margin-right: auto;
}