Slick Video and Image Slide

by Faisal Khan Janjua

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="liststack">
	<div>
    <div class="slide" style="background-image: url('https://via.placeholder.com/280')"></div>
  </div>
	<div>
    <div class="slide" style="background-image: url('https://via.placeholder.com/350')"></div>
  </div>
	<div>
    <div class="iframeWrapper">
      <iframe class="yt__ responsive-iframe" data-play="0" data-src="" src="https://youtube.com/embed/owiwCIhc0I0&controls=0" frameborder="0"></iframe>
    </div>
  </div>
	<div>
    <div class="iframeWrapper">
      <iframe class="vm__ responsive-iframe" src="https://player.vimeo.com/video/77774831" frameborder="0"></iframe>
    </div>
  </div>
</div>

CSS

@import url('https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css');

.slide {
  width: 100%;
  height: 350px;
  background: no-repeat center;
  background-size: cover;
}
.iframeWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-top: 56.25%;
}
.responsive-iframe {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

ul.slick-dots {
    bottom: 0;
    padding: 0;
    width: 100%;
    display: flex;
    list-style: none;
    position: absolute;
    align-items: center;
    justify-content: center;
}

JavaScript

jQuery(document).ready(function(){
  jQuery('.liststack').slick({
    dots: true,
    fade: true,
    arrows: false,
    autoplay: true,
    cssEase: 'linear',
    autoplaySpeed: 3000,
    adaptiveHeight: true
  });
});