JSFiddle - React, Tailwind, and code Playground

by Krzysztof Safjanowski

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
<div class="cycle-slideshow-2" 
     data-cycle-fx=scrollHorz 
     data-cycle-timeout=3000 
     data-cycle-caption-plugin=caption2 
     data-cycle-caption-fx-out='slideUp' 
     data-cycle-caption-fx-in='slideDown'>

    <div class="cycle-caption"></div>
    <div class="cycle-overlay"></div>

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

JavaScript

$('.cycle-slideshow-2').cycle({
    speed: 600,
    manualSpeed: 6000,
}).on('cycle-update-view', function(event, optionHash, slideOptionsHash, currentSlideEl) {
        if (!currentSlideEl.getAttribute('data-cycle-desc') || !currentSlideEl.getAttribute('data-cycle-title')) {
          slideOptionsHash.overlayTemplate = '';
        } else { 
          slideOptionsHash.overlayTemplate = '<div>{{title}}</div><div>{{desc}}</div>';
        }
    });