JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<div class="flexslider carousel">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides" style="width: 2400%; transition-duration: 0.6s; transform: translate3d(0px, 0px, 0px);">
            <li style="width: 210px; float: left; display: block;">
                <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="images/kitchen_adventurer_lemon.jpg" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="https://as.ftcdn.net/r/v1/pics/ea2e0032c156b2d3b52fa9a05fe30dedcb0c47e3/landing/images_photos.jpg" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8JqCXtQF5KMhBSEYfV2Vv2fJygSw8kfyMF4BXIDu7FtR86YZThA" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx4bec-SbCJWSm7k4VJuhhqNzX9HrYLKtMLTOINwpg_3svG8ui" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="images/kitchen_adventurer_lemon.jpg" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="images/kitchen_adventurer_donut.jpg" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="images/kitchen_adventurer_caramel.jpg" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img...

JavaScript

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    slideshow: false,
    itemWidth: 460,
    itemMargin: 30,
    minItems: 2,
    maxItems: 6,
    controlNav: false,
    customDirectionNav: ".custom-direction li a",
    start: function (slider) {
        window.addCurrentSlidesClass(slider);
    },
    after: function (slider) {
        window.addCurrentSlidesClass(slider);
    }
});

window.addCurrentSlidesClass = function (slider) {
    //debugger;
    $('.flexslider li').removeClass("active-slides");
    var startli = (slider.move * (slider.currentSlide));
    var endli = (slider.move * (slider.currentSlide + 1));
    for (i = startli + 1; i <= endli; i++) {
        $('.flexslider li:nth-child(' + i + ')').addClass('active-slides');
    }
}