JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="bxslider">
  <div style="background: red;">1</div>
  <div style="background: green;">2</div>
  <div style="background: blue;">3</div>
  <div style="background: grey;">4</div>
  <div style="background: black;">5</div>
  <div style="background: cyan;">6</div>
</div>

<br />

<a href="#" onClick="JumpToSlide(4); return false">Go to slide 4</a>

CSS

div.bxslider {
    width: 300px;
    height: 300px;
    display: block;
}

div.bxslider div {
    width: 300px;
    height: 300px;
    display: block;
    font-size: 200px;
    line-height: 300px;
    text-align: center;
    color: white;
}

JavaScript

$(document).ready(function(){
    
    var bxslider = $('.bxslider').bxSlider({
    
        pager: false,
        auto: false
        
    });
    
    JumpToSlide = function (slideNumber) {
        
        var slide = slideNumber - 1;
        
        bxslider.goToSlide(slide);

    };

});