<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video src="" muted></video>
</div>
<div class="swiper-slide">
<video src="" preload="none" muted></video>
</div>
<div class="swiper-slide">
<video src="" preload="none" muted></video>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
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();
},
}
})
'퍼블리셔일기' 카테고리의 다른 글
var, let , const 차이 (0) | 2022.06.02 |
---|---|
vue.js nuxt.js 에서 swiper 사용하기 (0) | 2022.05.12 |
button click selected option change 버튼 클릭시 옵션 체크 변경 (0) | 2021.10.27 |
풀페이지 팝업시 뒤에 스크롤 안되게 하기 자바스크립트 (1) | 2021.04.01 |
이미지 첨부 미리보기 파일이미지 만들기 html,css, js (0) | 2021.03.04 |