JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<ul class="bxslider">
    <li><img src="http://placehold.it/350x150" alt=""></li>
    <li><img src="http://placehold.it/350x150" alt=""></li>
    <li><img src="http://placehold.it/350x150" alt=""></li>
    <li><img src="http://placehold.it/350x150" alt=""></li>
    <li><img src="http://placehold.it/350x150" alt=""></li>
</ul>

CSS

li{
    cursor:pointer;
}

.bx-controls{
    display:none;
}

JavaScript

$('.bxslider').bxSlider({
  		minSlides: 3,
  		maxSlides: 3,
  		slideWidth: 350,
  		slideMargin: 0,
  		 moveSlides: 1,
  		 pager: false,
  		 // auto: true,
  		 speed: 3000,
  		 pause: 8000,
  		 // autoHover: true,
  		 onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
             debugger;
			$('.active-caption').removeClass('active-caption');
			$('.bxslider>li').eq(currentSlideHtmlObject + 4).addClass('active-caption');
			$('.prev-caption').removeClass('prev-caption');
             
			$('.bxslider>li').eq(currentSlideHtmlObject + 3).addClass('prev-caption');
			$('.next-caption').removeClass('next-caption');
			$('.bxslider>li').eq(currentSlideHtmlObject + 5).addClass('next-caption')
		},
        onSliderLoad: function () {
 			$('.bxslider>li').eq(4).addClass('active-caption');
 			$('.bxslider>li').eq(3).addClass('prev-caption');
 			$('.bxslider>li').eq(5).addClass('next-caption');
 			$('.bxslider>li').eq(3).on('click',function(){
 				$('a.bx-prev').trigger('click');
 			});
 			$('.bxslider>li').eq(5).on('click',function(){
 				$('a.bx-next').trigger('click');
 			})
       },
	});