JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<div class="slider">
    <a href="/"><img src="http://placehold.it/480x320/ff0&text=Slider 1" /></a>
    <script class="other-slides" type="text/cycle">
    [
        "<a href='/'><img src='http://placehold.it/480x320/f00&text=Slider 1' /></a>",
        "<a href='/'><img src='http://placehold.it/480x320/0f0&text=Slider 1' /></a>"
    ]
    </script>
</div>

<div class="slider">
    <a href="/"><img src="http://placehold.it/480x320/000&text=Slider 2" /></a>
    <script class="other-slides" type="text/cycle">
    [
        "<a href='/'><img src='http://placehold.it/480x320/00f&text=Slider 2' /></a>",
        "<a href='/'><img src='http://placehold.it/480x320/0ff&text=Slider 2' /></a>"
    ]
    </script>
</div>

JavaScript

$('.slider').each(function() {
    var $this = $(this);
    $this.cycle({
        slides: '> a',
        fx: 'scrollHorz',
        loader: true,
        progressive: function() {
            var slides = $('.other-slides', $this).html();
            return $.parseJSON( slides );
        },
        speed: 'fast',
        timeout: 3000
    });
});