JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<ul class="bxslider">
  <li> <p>1Lorem ipsum dolor sit amet </p>   </li>
    <li> <p>2Lorem ipsum dolor sit amet </p>   </li>
    <li> <p>3Lorem ipsum t </p>   </li>
    <li> <p>4Lorem ipsum dolor sit amet </p>   </li>
    <li> <p>5Lorem </p>   </li>
    <li> <p>6Lorem ipsum dolor sit amet </p>   </li>
    <li> <p>7Lorem  </p>   </li>
    <li> <p>8Lorem ipsum dolor sit amet </p>   </li>
    <li> <p>9Lor </p>   </li>
    <li> <p>10Lorem ipsum dolor sit amet </p>   </li></li>
  
</ul>

<div class="outside">
  <h3>This div is outside of the slider</h3>
  <p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
</div>

CSS

li{
    width: initial !important;
    margin: 0px 20px;
}

JavaScript

$( document ).ready(function() {

$('.bxslider').bxSlider({
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  nextText: 'Onward →',
  prevText: '← Go back',
   minSlides: 3,
  maxSlides: 5,
  slideMargin: 0,
    adaptiveHeight: true,
    infiniteLoop: false,
  hideControlOnEnd: true
    
});
    console.log("Here");
});