JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<ul class="touchSlider">
    <li><img src="http://bit.ly/K91q5b" width="500" height="500" /></li>
    <li><img src="http://bit.ly/ISmFb4" width="500" height="500" /></li>
    <li><img src="http://bit.ly/ISmFI8" width="500" height="500" /></li>
    <li><img src="http://bit.ly/IWP8qZ" width="500" height="500" /></li>
</ul>

JavaScript

// Using 
//     jQuery
//     jCycle - http://jquery.malsup.com/cycle/
// 
// Super simple example - Check (http://jquery.malsup.com/cycle/options.html) for more options

$('.touchSlider').cycle({
    fx:'fade',            /* Make it fade */
    next: $('li',this),   /* When ever we click an LI inside this touchslider we can move to next slide */
    timeout:0             /* so it doesn't goto the next slide automatically */
});