JSFiddle - React, Tailwind, and code Playground

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" >
    <a src="http://malsup.github.io/images/p4.jpg"
    data-cycle-title="Raquette Lake" 
    data-cycle-desc="Adirondack State Park"
     href='www.google.com'><img src="http://malsup.github.io/images/p3.jpg" ></a>
</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>';
        }
    });