JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css">
<ul class="carousel-slider">
  <li><img src="http://placehold.it/800x500?text=1"></li>
  <li><img src="http://placehold.it/800x500?text=2"></li>
  <li><img src="http://placehold.it/800x500?text=3"></li>
  <li><img src="http://placehold.it/800x500?text=4"></li>
  <li><img src="http://placehold.it/800x500?text=5"></li>
</ul>

CSS

/* Design #counter however you want */
#counter { margin: 0 auto; text-align:center; font: 400 16px/1.5 verdana; width: 100%; height: 24px; position:relative; top: 2em; color: #9f9f9f; }

JavaScript

$(function() {
      var bx = $('.carousel-slider').bxSlider({
        auto: false,
        pager: false,
        //pagerType: 'short',
        minSlides: 3,
        maxSlides: 3,
        moveSlides: 1,
        /* Not required just added, could be useful */
        shrinkItems: true,
        slideWidth: 800,
        slideMargin: 40,
				/* Callback will update active slide index after a transition */
				onSlideAfter: counter,
				/* Callback will insert the new pager element when loading */
				onSliderLoad: init
      });
			function init() {
				$('.bx-controls').after('<nav id="counter">1 / 5</nav>');
			}
			function counter() {
          $('#counter').text((bx.getCurrentSlide() + 1) + ' / ' + bx.getSlideCount());
      }

});