JSFiddle - React, Tailwind, and code Playground

by oakley808

HTML

<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.loader.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.carousel.js"></script>
<div id="slideshow-1">
    <div id="cycle-1" class="cycle-slideshow"
        data-cycle-slides="> div"
        data-cycle-fx=scrollHorz
        data-cycle-timeout=3000
        data-cycle-pager=".adv-custom-pager"
        data-cycle-pager-template="<a href='#' ><img src='{{firstChild.src}}' width='100' height='100'></a>"
    >

            <div><img src="http://malsup.github.com/images/beach1.jpg" width="400" height="400"></div>
            <div><img src="http://malsup.github.com/images/beach2.jpg" width="400" height="400"></div>
            <div><img src="http://malsup.github.com/images/beach3.jpg" width="400" height="400"></div>
            <div><img src="http://malsup.github.com/images/beach4.jpg" width="400" height="400"></div>
            <div><img src="http://malsup.github.com/images/beach5.jpg" width="400" height="400"></div>
            <div><img src="http://malsup.github.com/images/beach6.jpg" width="400" height="400"></div>
            <div><img src="http://malsup.github.com/images/beach7.jpg" width="400" height="400"></div>
            <div><img src="http://malsup.github.com/images/beach8.jpg" width="400" height="400"></div>
            <div><img src="http://malsup.github.com/images/beach9.jpg" width="400" height="400"></div>
    </div>
</div>


<div id="slideshow-2">
    <div id="cycle-2" class="cycle-slideshow adv-custom-pager"
        data-cycle-slides="> img"
        data-cycle-timeout="0"
        data-cycle-fx="carousel"
        data-cycle-carousel-visible="4"
        data-cycle-carousel-fluid=true
        data-allow-wrap="false"
        data-cycle-loader="wait"
    >
    <!-- pager is created dynamically from the first slideshow -->
    </div>

</div>

CSS

#cycle-2 .cycle-slide        { border:3px solid #fff; }
#cycle-2 .cycle-slide-active { border:3px solid #004; }

#cycle-1 { width: 400px; height:400px; }

#cycle-2 { width: 400px; height:100px; }

JavaScript

jQuery(document).ready(function($){

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
    // advance the other slideshow
    slideshows.not(this).cycle('goto', opts.currSlide);
});

$('#cycle-2 .cycle-slide').click(function(){
    var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
    slideshows.cycle('goto', index);
});

});