JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<ul class="bxslider">
    <li>
        <img src="http://lorempixel.com/200/200/sports" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/city" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/fashion" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/animals" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/food" />
    </li>
</ul>
</div>

CSS

.bx-wrapper .bx-pager {
     bottom: -95px;
 }
 .bx-wrapper .bx-pager img {
     width:40px;
     height:40px;
 }
 .bx-wrapper .bx-pager a {
'     border: solid #ccc 1px;
     display: block;
     margin: 0 5px;
     padding: 3px;
 }
 .bx-wrapper .bx-pager a:hover, .bx-wrapper .bx-pager a.active img{
     border: solid #5280DD 4px;
     width:42px;
     height:42px;     
 }
 .bx-wrapper {
     margin-bottom: 120px;
 }

JavaScript

$('.bxslider').bxSlider({
    auto:true,
    pause:8000,
    slideWidth: 200,
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    buildPager: function (slideIndex) {
        switch (slideIndex) {
            case 0:
                return '<img src="http://lorempixel.com/200/200/city">';
            case 1:
                return '<img src="http://lorempixel.com/200/200/fashion">';
            case 2:
                return '<img src="http://lorempixel.com/200/200/animals">';
            case 3:
                return '<img src="http://lorempixel.com/200/200/food">';
            case 4:
                return '<img src="http://lorempixel.com/200/200/sports">';
        }
    }

});