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="http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js"></script>
<div class="royalSlider rsDefault">
 
    <div>
        <img src="http://dummyimage.com/800x600/673950/fff.png&text=4x3" class="rsImg"/>
        <div class="rsTmb">thumb1</div>
    </div>
    
    <div>
        <img src="http://dummyimage.com/800x600/678950/fff.png&text=4x3" class="rsImg"/>
        <div class="rsTmb">thumb2</div>
    </div>
    
</div>

CSS

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

html, body {
    overflow-x: hidden;
}

.royalSlider {
   width: 100%;
   padding-right: 100px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.rsDefault .rsNav {
  width: 100px;
}
.rsDefault .rsThumb {
   width: 100%;
}

JavaScript

var slider = $('.royalSlider').royalSlider({
    arrowsNav: false,
    fadeinLoadedSlide: true,
    controlNavigation: 'thumbnails',
    thumbs: {
      autoCenter: false,
      fitInViewport: false,
      orientation: 'vertical',
      spacing: 0,
      paddingBottom: 0
    },
    keyboardNavEnabled: true,
    imageScaleMode: 'fill',
    imageAlignCenter:true,
    slidesSpacing: 0,
    loop: false,
    loopRewind: true,
    numImagesToPreload: 3,
    video: {
      autoHideArrows:true,
      autoHideControlNav:false,
      autoHideBlocks: true
    }, 
    autoScaleSlider: true, 
    autoScaleSliderWidth: 4,     
    autoScaleSliderHeight: 3,
});