55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
|
|
var swiper = new Swiper(".mySwiper-video", {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
breakpoints: {
|
|
0: {
|
|
slidesPerView: 1
|
|
},
|
|
576: {
|
|
slidesPerView: 2
|
|
},
|
|
992: {
|
|
slidesPerView: 3
|
|
},
|
|
},
|
|
});
|
|
document.querySelectorAll(".video-container").forEach(container => {
|
|
let video = container.querySelector("video");
|
|
let playBtn = container.querySelector(".play-button");
|
|
|
|
function playVideo() {
|
|
video.play().catch(error => console.log("Autoplay prevented:", error));
|
|
playBtn.style.opacity = "0"; // Hide play button
|
|
}
|
|
|
|
function pauseVideo() {
|
|
setTimeout(() => {
|
|
if (!video.matches(":hover")) {
|
|
video.pause();
|
|
playBtn.style.opacity = "1"; // Show play button again
|
|
}
|
|
}, 30);
|
|
}
|
|
|
|
container.addEventListener("mouseover", playVideo);
|
|
container.addEventListener("mouseout", pauseVideo);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
document.querySelector(".line").classList.add("animate");
|
|
}, 1000); // 1000ms = 1 second delay
|
|
setTimeout(() => {
|
|
document.querySelector(".uni-img").classList.add("animate");
|
|
}, 1500); // 1000ms = 1 second delay
|
|
|