JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="http://whadatfa.com/development/module/core/static/jscript/royalslider/jquery.royalslider.min.js"></script>
<link rel="stylesheet" href="http://whadatfa.com/development/module/core/static/css/default/default/royalslider/royalslider.css">
<link rel="stylesheet" href="http://whadatfa.com/development/module/core/static/css/default/default/royalslider/skins/default/rs-default.css">
<script src="http://www.youtube.com/player_api"></script>
<div id="gallery-1" class="royalSlider rsDefault">
     <a class="rsImg bugaga" data-rsw="400"  data-rsbigimg="http://whadatfa.com/lloyd/file/uploades/2013/12/Qjxs5PvZCYRanch Party  70.jpg" href="http://whadatfa.com/lloyd/file/uploades/2013/12/Qjxs5PvZCYRanch Party  70.jpg"><img width="96" height="72" class="rsTmb" src="http://whadatfa.com/lloyd/file/uploades/2013/12/Qjxs5PvZCYRanch Party  70.jpg"></a>
    <a class="rsImg bugaga" data-rsw="400" href="http://img.youtube.com/vi/w1jW0gsIztQ/0.jpg" data-rsVideo="w1jW0gsIztQ"><img class="rsTmb" src="http://img.youtube.com/vi/w1jW0gsIztQ/1.jpg"></a>
    <a class="rsImg bugaga" data-rsw="400" href="http://img.youtube.com/vi/pb-GbHZ8g5I/0.jpg" data-rsVideo="pb-GbHZ8g5I"><img class="rsTmb" src="http://img.youtube.com/vi/pb-GbHZ8g5I/1.jpg"></a>
         <a class="rsImg bugaga" data-rsw="400"  data-rsbigimg="http://whadatfa.com/lloyd/file/uploades/2013/12/Qjxs5PvZCYRanch Party  70.jpg" href="http://whadatfa.com/lloyd/file/uploades/2013/12/Qjxs5PvZCYRanch Party  70.jpg"><img width="96" height="72" class="rsTmb" src="http://whadatfa.com/lloyd/file/uploades/2013/12/Qjxs5PvZCYRanch Party  70.jpg"></a>
</div>

JavaScript

$.noConflict();
jQuery(document).ready(function($) {
  $('#gallery-1').royalSlider({
    fullscreen: {
      enabled: false,
      nativeFS: true
    },
    controlNavigation: 'thumbnails',
    
    loop: false,
    imageScaleMode: 'fit-if-smaller',
    navigateByClick: true,
    numImagesToPreload:2,
    arrowsNav:true,
    arrowsNavAutoHide: true,
    arrowsNavHideOnTouch: true,
    keyboardNavEnabled: true,
    fadeinLoadedSlide: true,
    globalCaption: true,
    globalCaptionInside: false,
    autoPlay: {
    		// autoplay options go gere
    		enabled: true,
    		pauseOnHover: false,
    		stopAtAction: false,
    		delay:3000
    	},
	video: {
    		// video options go gere
    		autoHideBlocks: true,
    		autoHideArrows: false,
			youTubeCode:'<iframe src="http://www.youtube.com/embed/%id%?rel=0&autoplay=1&showinfo=0" frameborder="no"></iframe>'
    	},
    thumbs: {
      appendSpan: true,
      firstMargin: true,
      paddingBottom: 4
    }
  });
  
  var slider = $("#gallery-1").data('royalSlider');
  slider.ev.on('rsAfterSlideChange', function(event) {
	slider.playVideo();
  });
  slider.ev.on('rsBeforeAnimStart', function(event) {
	slider.stopVideo();
  });
  
  slider.ev.on('rsOnCreateVideoElement', function (e, url) {
            setTimeout(function () {
                var player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    playerVars: { 'autoplay': 1, 'wmode': "transparent" },
                    videoId: url,
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });

                // autoplay video
                function onPlayerReady(event) {
                    event.target.playVideo();
                }

                // when video ends
                function onPlayerStateChange(event) {
                    if (event.data === 0) {
       ...