JSFiddle - React, Tailwind, and code Playground

by Virtual

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.6/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.6/slick.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="slideBox" class="row">
        <!--Sidebar-->
  
        <div id="main-image" class="sliderMain col-sm-9 col-xs-12 ">
        
          <div><img src="http://placehold.it/900x500/f00"></div>
          <div><img src="http://placehold.it/900x500"></div>
          <div><img src="http://placehold.it/900x500"></div>
          <div><img src="http://placehold.it/900x500"></div>
          <div><img src="http://placehold.it/900x500"></div>
          <div id="slide-video">
            <video id="theVideo">
              <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
            </video>
          </div>
        </div>

      <div class="sliderSidebar col-sm-3 col-xs-12 ">
          <div><img src="http://placehold.it/200x100"></div>
          <div><img src="http://placehold.it/200x100"></div>
          <div><img src="http://placehold.it/200x100"></div>
          <div><img src="http://placehold.it/200x100"></div>
          <div><img src="http://placehold.it/200x100"></div>
          <div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" />
          </div>

        </div>

      </div>
      <!--slideBox-->

    </div>
  </div>
</div>

CSS

#slideBox {
	  background-color: #54585A;
	}
	
	img {
	  width: 100%; height:auto;
	}
	
	video {
	  background-color: black;
	}
	
	.sliderMain {
	  position: relative;
	}

.sliderSidebar > div { width:20%;}

@media(min-width:768px) { 
body { background:#003f7f;}
.sliderSidebar { float:left;}
.sliderMain { float:right;}
.sliderSidebar > div { width:100%; float:left;}
}

JavaScript

$(document).ready(function() {
		  $('.sliderMain').slick({
		    slidesToShow: 1,
		    slidesToScroll: 1,
		    arrows: false,
		    fade: true,
		    asNavFor: '.sliderSidebar',
		    autoplay: true,
		    autoplaySpeed: 3000
		  });
		  $('.sliderSidebar').slick({
		    slidesToShow: 5,
		    slidesToScroll: 1,
		    asNavFor: '.sliderMain',
		    dots: false,
		    centerMode: false,
		    focusOnSelect: true,
		    vertical: true,
		    arrows: false
		  });
		  $('.sliderMain').on('afterChange', function(event, slick, currentSlide) {
		    if (currentSlide == 5) {
		      $('.sliderMain').slick('slickPause');
		      theVideo.play();
		    }
		  });

		  document.getElementById('theVideo').addEventListener('ended', myHandler, false);

		  function myHandler(e) {
		    $('.sliderMain').slick('slickPlay');
		  }


		});