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

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: '→',
            prevText: '←'
            

        });
        
  $('.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);