JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div id="skills" class="skills_section">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
</div>

<button id="slick">Slick</button>
<button id="unslick">Unslick</button>
<button id="ajax">Do Ajax</button>

CSS

button {
    display: block;
    margin: 1em 0;
    width: 5rem;
}

JavaScript

function slickCarousel() {
    $('.skills_section').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}

function unSlickCarousel() {
    if($('#skills').hasClass('slick-initialized')){
        $('.skills_section').unslick();
    }
}

function doAjax() {
    $.ajax({
        type: 'get',
        url: '/echo/json/',
        dataType: 'json',
        data: {
            json: JSON.stringify({a: true}),
            delay: 1
        },
        success: function resetCarousel(data) {
            console.log('success data::', data);
            unSlickCarousel();
            slickCarousel();
        }
    });
}

var slickButton = $('#slick');
var unslickButton = $('#unslick');
var ajaxButton = $('#ajax');

slickButton.click(slickCarousel);
unslickButton.click(unSlickCarousel);
ajaxButton.click(doAjax);