JSFiddle - React, Tailwind, and code Playground

by DmitrySemenov

HTML

<link rel="stylesheet" href="http://dimsemenov.com/plugins/royal-slider/royalslider/royalslider.css">
<link rel="stylesheet" href="http://dimsemenov.com/plugins/royal-slider/royalslider/skins/default/rs-default.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js"></script>
<h1>
Slider 1
</h1>
<div class="royalSlider rsDefault"> 
      <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+1" ></a>
        <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+2"></a>
        <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+3"></a>
        <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+4"></a>
        <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+5"></a>
</div>


<h1>
Slider 2
</h1>
<div class="royalSlider rsDefault"> 
      <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+1" ></a>
        <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+2"></a>
        <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+3"></a>
        <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+4"></a>
        <a class="rsImg" href="https://dummyimage.com/800x600/000/fff&text=image+5"></a>
</div>

CSS

html,body,div {
    margin:0; padding:0;
}


.royalSlider {
   width: 400px;
   height: 300px;
} 
.rsSlideCount {
  color: #fff;
  background: #000;
  font-size: 20px;
  pointer-events: none;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
}

JavaScript

$(window).on('touchstart touchmove', function () { });


$('.royalSlider').each(function() {
  var sliderJQ = $(this).royalSlider({
    controlNavigation:'none',
    imageScaleMode: 'fit',
  });
  var sliderInstance = sliderJQ.data('royalSlider');
  var slideCountEl = $('<div class="rsSlideCount"></div>').appendTo( sliderJQ );


  function updCount() {
    slideCountEl.html( (sliderInstance.currSlideId+1) + ' of ' + sliderInstance.numSlides );
  }
  sliderInstance.ev.on('rsAfterSlideChange', updCount);
  updCount();
});