50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// Select the logos container
|
|
const logosSlide = document.querySelector('.logos-slide');
|
|
|
|
// Initialize Swipers
|
|
const textSwiper = new Swiper('.text-swiper', {
|
|
slidesPerView: 1,
|
|
effect: 'fade',
|
|
fadeEffect: { crossFade: true },
|
|
allowTouchMove: true, // Allow text swiper to be swiped manually
|
|
});
|
|
|
|
const imageSwiper = new Swiper('.image-swiper', {
|
|
slidesPerView: 1.5,
|
|
centeredSlides: true,
|
|
spaceBetween: 30,
|
|
initialSlide: 1,
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
controller: {
|
|
control: textSwiper, // Link image swiper with text swiper
|
|
},
|
|
});
|
|
|
|
// Synchronize both swipers by controlling each other
|
|
textSwiper.controller.control = imageSwiper;
|
|
|
|
// Stop animation on mouseover
|
|
logosSlide.addEventListener('mouseover', () => {
|
|
logosSlide.style.animationPlayState = 'paused';
|
|
});
|
|
|
|
// Resume animation on mouseleave
|
|
logosSlide.addEventListener('mouseleave', () => {
|
|
logosSlide.style.animationPlayState = 'running';
|
|
});
|
|
|
|
// Pause and resume on click
|
|
logosSlide.addEventListener('click', () => {
|
|
const currentState = logosSlide.style.animationPlayState;
|
|
logosSlide.style.animationPlayState = (currentState === 'paused' || currentState === '') ? 'running' : 'paused';
|
|
});
|
|
});
|