JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mjmonline.se/test/js/slides.min.jquery.js"></script>
<div id="slides">
        <div class="slides_container">
            <div><img src="http://mjmonline.se/test/img/1.jpg" alt="placeholder image 1"></div>
            <div><img src="http://mjmonline.se/test/img/2.jpg" alt="placeholder image 2"></div>
            <div><img src="http://mjmonline.se/test/img/3.jpg" alt="placeholder image 3"></div>
            <div><img src="http://mjmonline.se/test/img/4.jpg" alt="placeholder image 4"></div>
            <div><div id="player"></div></div>
        </div>
    </div>

CSS

// http://mjmonline.se/test/stylesheets/screen.css
/*------------------------------***** =RESET AND FUNCTIONS ***** ------------------------------*/ /* Welcome to Compass.  * In this file you should write your main styles. (or centralize your imports)  * Import this file using the following HTML or equivalent:  * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ /* line 17, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {   margin: 0;   padding: 0;   border: 0;   font-size: 100%;   font: inherit;   vertical-align: baseline; }  /* line 20, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ body {   line-height: 1; }  /* line 22, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ ol, ul {   list-style: none; }  /* line 24, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ table {   border-collapse: collapse;   border-spacing: 0; }  /* line 26, ../../../../Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ caption, th, td {   text-align: left;   font-weight: normal;   vertical-align: middle; }  /* line 28,...

JavaScript

$(function(){
    /*-------------youtube api-------------*/
    var player;
    window.onYouTubePlayerAPIReady = function () {
        player = new YT.Player('player', {
            height: '315',
            width: '560',
            videoId: 'bpOR_HuHRNs',
        });
    }
    
    /*-------------slider-------------*/
    $("#slides").slides({
        play: 5000,
        pause: 2500,
        hoverPause: true,
        generateNextPrev: true,
        animationComplete: function(current) {
            // when animation is complete
            // check if current element is the player
            // if so play the video
            // else pause video
            if($(".slides_control > div:visible #player").length == 1) {
                player.playVideo();
            } else {
                player.pauseVideo();
            }
        }
    });
});