I created Slick Slide banners with iframe vimeo videos and images. I try to pause the current slider while playing the autoplay video.. I try with using "beforeChange' event for current slider pause, play only current slider video remain slider videos has to pause.. i don't understanding why not working where/what i am missing.
$(function() {
let $slideshow = $('.slick_slider');
$slideshow.slick({
initialSlide: 0,
autoplay: true,
autoplaySpeed: ImagePauses[0],
dots: false,
arrows: false,
fade: true
});
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
$slideshow.on('beforeChange', function(event, slick, currentSlide){
// pause old video (better performance)
if(!currentSlide) {
player.pause();
currentSlide.pause();
} else {
currentSlide.play();
player.pause();
}
});
});<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slick_slider">
<div class="vimeo-wrapper">
<iframe src="http://player.vimeo.com/video/565964510?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565964510" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-0.jpg" class="entity-img" alt="Image"/>
</div>
<div class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/565972134?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565972134" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-6.jpg" class="entity-img" alt="Image"/>
</div>
</div>