JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<link rel="stylesheet" href="//dimsemenov.com/plugins/royal-slider/royalslider/royalslider.css">
<script src="//dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js"></script>
<div class="royalSlider rsDefault">
<!-- <a class="rsImg" href="http://i67.tinypic.com/2hg7g4o.jpg">01 / 04</a>
<a class="rsImg" href="http://i64.tinypic.com/29vkmdg.jpg">02 / 04</a>
<a class="rsImg" href="http://i68.tinypic.com/auxs8m.jpg">03 / 04</a>
<a class="rsImg" href="http://i68.tinypic.com/351sgnl.jpg">04 / 04</a> -->


<div>
  <img class="rsImg" src="http://i67.tinypic.com/2hg7g4o.jpg" alt="" />
  <figure class="rsCaption">1 / 2</figure>
</div>
<div>
  <img class="rsImg" src="http://i64.tinypic.com/29vkmdg.jpg" alt="" />
  <figure class="rsCaption">2 / 2</figure>
</div>
<div>
  <img class="rsImg" src="http://i67.tinypic.com/2hg7g4o.jpg" alt="" />
  <figure class="rsCaption">1 / 2</figure>
</div>
<div>
  <img class="rsImg" src="http://i64.tinypic.com/29vkmdg.jpg" alt="" />
  <figure class="rsCaption">2 / 2</figure>
</div>

  <!-- <img src="http://i67.tinypic.com/2hg7g4o.jpg" />
  <img src="http://i64.tinypic.com/29vkmdg.jpg" />
  <img src="http://i68.tinypic.com/auxs8m.jpg" />
  <img src="http://i68.tinypic.com/351sgnl.jpg" /> -->
</div>

CSS

.royalSlider {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: auto;
}

.royalSlider {
   font-size: 100%;
   background:#2c170d;
}

.rsCaption {
  position:fixed;
  bottom:50px;
  left:50px;
  color:white;
}

JavaScript

jQuery(document).ready(function($) {
        $(".royalSlider").royalSlider({
            keyboardNavEnabled: true,
            loop: true,
            arrowsNav: false,
            imageAlignCenter: true,
            autoCenter: true,
            globalCaption:true,
        });  
    });