JSFiddle - React, Tailwind, and code Playground

by giovanni gokhan morkoc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css">
<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li>
    <video controls>
      <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg"> Your browser does not support the video tag.
    </video>
  </li>
  <li><img src="/images/pic2.jpg" /></li>
  <li>
    <video controls>
      <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg"> Your browser does not support the video tag.
    </video>
  </li>
</ul>

JavaScript

$(document).ready(function() {
  var $bxslider = $('.bxslider');
  $bxslider.bxSlider({
    onSlideBefore: function() {
      // pause all videos
      $bxslider.find('video').each(function() {
        this.pause();
      });
    },
    onSlideAfter: function($slideElement, oldIndex, newIndex) {
    	// get the video element, assume only one video in each slide
      var video = $slideElement.find('video')[0];
      // if this slide contains video and video has been played then continue the video
      video !== undefined && video.currentTime !== 0 && video.play();
    }
  });
});