JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://ludikocr.com/jquery.bxslider.js"></script>

<ul class="bxslider" style="width: auto; position: relative;">
    <li>
        <img src="http://placehold.it/300x150&text=FooBar0" title="Funky roots1" />
    </li>
    <li>
        <img src="http://placehold.it/300x150&text=FooBar1" title="Funky roots2" />
    </li>
    <li>
        <img src="http://placehold.it/300x150&text=FooBar2" title="Funky roots3" />
    </li>
     <li>
        <img src="http://placehold.it/300x150&text=FooBar3" title="Funky roots4" />
    </li>
     <li>
        <img src="http://placehold.it/300x150&text=FooBar4" title="Funky roots5" />
    </li>
     <li>
        <img src="http://placehold.it/300x150&text=FooBar5" title="Funky roots6" />
    </li>
     <li>
        <img src="http://placehold.it/300x150&text=FooBar6" title="Funky roots7" />
    </li>
     <li>
        <img src="http://placehold.it/300x150&text=FooBar7" title="Funky roots8" />
    </li>
     <li>
        <img src="http://placehold.it/300x150&text=FooBar8" title="Funky roots8" />
    </li>
    <li>
        <img src="http://placehold.it/300x150&text=FooBar9" title="Funky roots9" />
    </li>
</ul>
<div class="slider4">
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(0);">
        <img src="http://placehold.it/300x150&text=FooBar0">
            </a>

    </div>
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(1);">
        <img src="http://placehold.it/300x150&text=FooBar1">
             </a>

    </div>
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(2);">
        <img src="http://placehold.it/300x150&text=FooBar2">
            </a>

    </div>
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(3);">
        <img src="http://placehold.it/300x150&text=FooBar3">
            </a>

    </div>
    <div class="slide"> <a href="javascript:void(0);"...

CSS

.bx-wrapper .bx-caption {
    margin-bottom:10px;
}
#bx-pager {
    margin-top: -30px;
    text-align: center;
}

JavaScript

var carousel;
var slider;
$(document).ready(function () {
    carousel = $('.slider4').bxSlider({
        slideWidth: 300,
        minSlides: 2,
        maxSlides: 1,
        moveSlides: 1,
        slideMargin: 10,
        pager: false
     
    });

    slider = $('.bxslider').bxSlider({
        captions: true,
        controls: false,
        pager: false
    });
});

function clicked(position) {
    slider.goToSlide(position);
}