JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />


<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>

JavaScript

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