JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
<!-- jQuery Cycle 2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js" ></script>  
<script src="http://malsup.github.io/min/jquery.cycle2.caption2.min.js"></script>  

<!-- Slideshow -->
<div id="cycle2" class="cycle-slideshow" 
    data-cycle-fx=fade
    data-cycle-speed=2500
    data-cycle-timeout=3000
    data-cycle-caption-plugin=caption2
    data-cycle-overlay-fx-out="slideUp"
    data-cycle-overlay-fx-in="slideDown"

    data-cycle-overlay-template="{{title}}<br>{{alt}}"
    data-cycle-title-template="{{title}}"
    data-cycle-desc-template="{{alt}}"
    >

    <div class="cycle-overlay"></div>
    <img src="http://malsup.github.io/images/p1.jpg" title="Spring" alt="Sonnenberg Gardens">
    <img src="http://malsup.github.io/images/p2.jpg" title="Redwoods" alt="Muir Woods National Monument">
    <img src="http://malsup.github.io/images/p3.jpg" title="Angel Island" alt="San Franscisco Bay">
    <img src="http://malsup.github.io/images/p4.jpg" title="Raquette Lake" alt="Adirondack State Park">
    <div class="cycle-pager"></div>
</div>

CSS

#cycle2 {
    width: 100%;
}
.cycle-pager {
    top: 96%;
}