Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } .swiper-container { width: 100%; height: 100vh; max-width: 940px; margin: 0 auto; .swiper-wrapper { .swiper-slide { video { width: 100%; height: 100%; } } } }
console.log("Event Fired") var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'horizontal', loop: false, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on: { transitionStart: function(){ var videos = document.querySelectorAll('video'); Array.prototype.forEach.call(videos, function(video){ video.pause(); }); }, transitionEnd: function(){ var activeIndex = this.activeIndex; var activeSlide = document.getElementsByClassName('swiper-slide')[activeIndex]; var activeSlideVideo = activeSlide.getElementsByTagName('video')[0]; activeSlideVideo.play(); }, } })