.swiper {
width: 100%;
padding: 50px 0;
overflow: hidden;
}
.swiper-slide {
width: 600px; /* Main image width */
height: auto;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.4s ease;
}
.swiper-slide img {
width: 100%;
height: 500px; /* Taller, cinematic height */
border-radius: 20px;
object-fit: cover;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
background-color: #e53935;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 18px;
color: white;
}
const swiper = new Swiper('.mySwiper', {
loop: true,
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
spaceBetween: 80, // << ADDED space between images
speed: 1000,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
effect: 'coverflow',
coverflowEffect: {
rotate: 25,
stretch: 0,
depth: 200,
modifier: 1,
slideShadows: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
const lightbox = GLightbox({
selector: '.glightbox',
});