JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<div class='main'>
    <div class="home-slideshow">
        <img src="http://placehold.it/950x250/000" alt="">
            <img src="http://placehold.it/950x250/fff" alt="">
    </div>
    <div class="caro" >
        <img src="http://placehold.it/300x300/000" alt="">
            <img src="http://placehold.it/300x300/00f" alt=""> 
                <img src="http://placehold.it/300x300/0ff" alt="">
                    <img src="http://placehold.it/300x300/0f0" alt=""> 
                        <img src="http://placehold.it/300x300/f00" alt="">
                            <img src="http://placehold.it/300x300/fff" alt=""> 	
    </div>
</div>

CSS

.main {
    max-width: 950px;
    margin: auto;
}
.home-slideshow {
    margin-bottom: 150px;
}
.home-slideshow img{
    width: 100%;
}

JavaScript

function buildCarousel(visibleSlides) {
    $('.caro').cycle({
        fx: 'carousel',
        speed: 600,
        slides: 'img',
        carouselVisible: visibleSlides,
        carouselFluid: true
    });
    $('.caro img').css('opacity','1');
}
function buildSlideshow() {
    $('.home-slideshow').cycle({
        fx: 'fade',
        slides: 'img',
        timeout: 12000
    });
}

function initCycle() {
    var width = $(document).width();
    var visibleSlides = 5;
    
    if ( width < 400 ) {visibleSlides = 1}
    else if(width < 700) {visibleSlides = 3}
    else {visibleSlides = 5};

    buildSlideshow();
    buildCarousel(visibleSlides);
}

function reinit_cycle() {
    var width = $(window).width();
    
    
    var destroyCarousel = function() { // create a function
        $('.caro').cycle('destroy');
    }

    if (width < 400) {
        destroyCarousel(); // call the function
        reinitCycle(1);
    } else if (width > 400 && width < 700) {
        destroyCarousel();
        reinitCycle(3);
    } else {
        destroyCarousel();
        reinitCycle(5);
    }
}

function reinitCycle(visibleSlides) {
    buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
    clearTimeout(reinitTimer);
    reinitTimer = setTimeout(reinit_cycle, 100);
});

$(document).ready(function(){
    initCycle();    
});