Slick Slider Contribution

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

by mathiasfcx

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/latest/slick.css">
<script src="//vjs.zencdn.net/4.9.0/video.js"></script>
<link rel="stylesheet" href="//vjs.zencdn.net/4.9.0/video-js.css">
<script src="http://cdn.jsdelivr.net/jquery.slick/latest/slick.min.js"></script>
<div class="window">
  <div class="window-content">
    <div class="comercial">
      <div>
        <img src="https://getuikit.com/v2/docs/images/placeholder_480x260.svg" style="width: 100%;height:100%" />
      </div>
      <div>
        <video id="meuVideo">
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" style="width: 100%;" />
        </video>
      </div>
      <div>
        <img src="https://getuikit.com/v2/docs/images/placeholder_480x260.svg" style="width: 100%;height:100%" />
      </div>
    </div>
  </div>
</div>

CSS

.slick-slide {
  height: 300px;
  background: skyblue;
  color: white;
  font-size: 30px;
  font-family: "Arial";
}

.slick-slide:nth-child(1),
.slick-slide:nth-child(3),
.slick-slide:nth-child(5) {
  background: teal;
}

JavaScript

$(document).ready(function() {
  $('.comercial').slick({
    autoplay: true,
    arrows: false,
    fade: true,
    infinite: true,
    cssEase: 'linear'
  });
});

$('.comercial').on('afterChange', function(event, slick, slide) {
  if (slide == 1) {
    $('.comercial').slick('slickPause');
    meuVideo.play();
  }
});

$('#meuVideo').on('ended', function() {
  $('.comercial').slick('slickPlay');
});