JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<div class="center">
    <span class="prev"><a href="#"><< Prev</a></span>
    <span class="next" style="margin-left:20px"><a href="#">Next >></a></span>
</div>
<div class="cycle-slideshow"
    data-cycle-prev=".prev"
    data-cycle-next=".next"
    data-cycle-fx="scrollHorz"
data-cycle-speed="500"
    data-cycle-timeout="0"
data-cycle-center-horz="true"
    data-cycle-center-vert="true"
    >
        <img src="http://malsup.github.io/images/p1.jpg" data-cycle-hash="spring" />
        <img src="http://malsup.github.io/images/p2.jpg" data-cycle-hash="trees" />
        <img src="http://malsup.github.io/images/p3.jpg" data-cycle-hash="water" />
        <img src="http://malsup.github.io/images/p4.jpg" data-cycle-hash="sunset" />
</div>

CSS

.cycle-slideshow {
    width: 100%;
min-width: 200px;
max-width: 500px;
margin: 10px auto;
padding: 0;
position: relative;
}

.cycle-slideshow img {
    width: 50%; height: 100%:
}