JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<div class="slider">
  
  <div id="bx-pager">
    <a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
    <a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
    <a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
  </div>

  <ul class="bxslider">
    <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
  </ul>
  
</div>

CSS

.slider {
  display: flex;
}

JavaScript

$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager'
});