Slick.js And Html5 Video Autoplay And Pause On Video

Is it possible to use slick.js with html5 self hosted videos, to play and pause a video without user interaction? I currently have the following code to have a dual slider with a v

Solution 1:

Yes it can be done using JavaScript. When the video slide becomes the currentSlide you need to:

1. pause the slider
2. play the video

You can do this using the slick.js event afterChange:

$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
  if (currentSlide == 5) {
    $('.sliderMain').slick('slickPause');
    myVideo.play();
  }
});

You will also need to add an event listener for when to video ends in order to order the slider to continue. You can do so like this:

document.getElementById('myVideo').addEventListener('ended',myHandler,false);
functionmyHandler(e) {
    $('.sliderMain').slick('slickPlay');
}

If you're having trouble with this, please add a JSFiddle and I'll try help you there.

Edit: here's a working JSFiddle

$(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);

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

#slideBox {
  width: 1300px;
  max-height: 500px;
  overflow: hidden;
  margin: 1% auto;
  position: relative;
  top: 1em;
  background-color: #54585A;
  border-radius: .3em;
}
video {
  background-color: black;
}
#slideBox.slick-vertical.slick-slide {
  border: none;
}
.sliderSidebar {
  width: 200px;
  height: 500px;
  float: left;
}
#slideBox.slick-vertical.slick-slide {
  border: none;
}
.sliderMain {
  width: 900px;
  height: 500px;
  position: relative;
  float: left;
}

<divid="slideBox"><!--Sidebar--><divclass="sliderSidebar"><div><imgsrc="https://via.placeholder.com/200x100"></div><div><imgsrc="https://via.placeholder.com/200x100"></div><div><imgsrc="https://via.placeholder.com/200x100"></div><div><imgsrc="https://via.placeholder.com/200x100"></div><div><imgsrc="https://via.placeholder.com/200x100"></div><div><imgsrc="https://via.placeholder.com/200x100/C8102E/FFFFFFF?text=Video" /></div></div><divid="main-image"class="sliderMain"><div><imgsrc="https://via.placeholder.com/900x500"></div><div><imgsrc="https://via.placeholder.com/900x500"></div><div><imgsrc="https://via.placeholder.com/900x500"></div><div><imgsrc="https://via.placeholder.com/900x500"></div><div><imgsrc="https://via.placeholder.com/900x500"></div><divid="slide-video"><videowidth="900px"id="theVideo"><sourcesrc="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" /></video></div></div></div><linkhref="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>