JSFiddle - React, Tailwind, and code Playground

by sergey_beloglazov

HTML

<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div>

<div class="slider-pager">
  <div class="slider-pager__item">click me 1</div>
  <div class="slider-pager__item">click me 2</div>
  <div class="slider-pager__item">click me 3</div>
</div>
</div>

CSS

div.slider-pager__item {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background: gray;
  border: 1px solid green;
  float: left;
}

div.active {
  border: 5px solid red;
}

JavaScript

(function ($) {
    $(function () {   
        
        var carouselProduct = $('.slider-pager').bxSlider({
            maxSlides:  2,
            minSlides: 2,
            slideWidth: 210,
            slideHeight: 210,
            infiniteLoop: false,
            moveSlides: 1,
            slideMargin: 8,
            pager: false,
            nextText: '&nbsp;&nbsp;  right >>',
            prevText: '<< left &nbsp;&nbsp;'
            

        });
        
  $('.slider-pager__item').on('click', function (event) {
    //Don't fire in Chrome 73, works in FireFox
            $('.slider-pager__item').removeClass('active');
            $(this).addClass('active');

        });

    });
})(jQuery);


/* Chrome bx slider bug workaround
 Обход бага bx slider в Chrome */
//A slide, that has the mouse pointer over
window.bxslider_mouse_over_slide=null;
$(function() {
	$('.slider-pager div').mouseover(
		function(event) {
			window.bxslider_mouse_over_slide=$(this);
		});

});
$('.slider-pager').parent().on('click', function (event) {
	//Check if we've got a slide under the mouse
	if ((window.bxslider_mouse_over_slide!=null)){
			$('.slider-pager__item').removeClass('active');
		window.bxslider_mouse_over_slide.addClass('active');
	}
});