I use slick carousel http://kenwheeler.github.io/slick/ on my page and now I need to add video with autoplay in it.
I use this code
HTML
<div class="main-slider" id="main-slider">
<div>
<div class="video-wrapper">
<video autoplay loop class="pageBackground-video">
<source src="/Content/video/332145276.mp4" type="video/mp4">
</video>
</div>
</div>
<div>
<div class="video-wrapper">
<video autoplay loop class="pageBackground-video">
<source src="/Content/video/332145276.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
and script
$('#main-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 30000,
dots: true,
infinite: true,
adaptiveHeight: true,
arrows: false
});
but autoplay doesn't work. Is there any way to make autoplay work?
upd I tried to use
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
var video = currentSlide.children('video').get(0).play();
});
but I get an error Uncaught TypeError: currentSlide.children is not a function
because currentSlide
it's just a number (0,1,etc). How to get current element?
upd2 I used this code and it works
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
$('#main-slider .slick-slide').find('video').get(0).pause();
var video = $('#main-slider .slick-active').find('video').get(0).play();
});
but now autoplay work for all video perfectly but only after first slick changes. How to make it work for the first video after page only loaded.
upd3 I used this code
var video = $('#main-slider .slick-active').find('video').get(0).play();
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
$('#main-slider .slick-slide').find('video').get(0).pause();
var video = $('#main-slider .slick-active').find('video').get(0).play();
});
and now all work as I want but I'm afraid my code is ugly (
You can also link to another Pen here (use the . css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
You can use functions from the slick docs.
// On slide change, pause all videos
$('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('video').each(function() {
$(this).get(0).pause();
});
});
// On slide chnage, play a video inside the current slide
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
if( $('.project-slide.slick-current').find('video').length !== 0) {
$("#main-slider .slick-current video")[0].play();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With