#main-swiper-1, #thumbs-swiper-1 {
width: 100%;
margin-bottom: 20px;
}
#main-swiper-1 img {
width: 100%;
height: auto;
object-fit: cover;
}
/* Flexbox στο swiper-wrapper των thumbnails */
#thumbs-swiper-1 .swiper-wrapper {
display: flex !important;
justify-content: center !important; /* Οριζόντια κεντράρισμα */
align-items: center !important; /* Κατακόρυφο κεντράρισμα */
}
/* Τα slides να είναι auto width, χωρίς margin */
#thumbs-swiper-1 .swiper-slide {
width: auto !important;
opacity: 0.4;
cursor: pointer;
margin: 0 5px;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#thumbs-swiper-1 .swiper-slide-thumb-active {
opacity: 1;
}
#thumbs-swiper-1 .swiper-slide img {
width: 100% !important;
height: auto !important;
object-fit: cover;
display: block;
margin: 0 auto;
}
document.addEventListener('DOMContentLoaded', function () {
setTimeout(function() {
const thumbsSwiper = new Swiper('#thumbs-swiper-1', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
breakpoints: {
768: { slidesPerView: 5 },
480: { slidesPerView: 3 }
}
});
const mainSwiper = new Swiper('#main-swiper-1', {
spaceBetween: 10,
thumbs: {
swiper: thumbsSwiper
}
});
}, 0);
});
#main-swiper-2, #thumbs-swiper-2 {
width: 100%;
margin-bottom: 20px;
}
#main-swiper-2 img {
width: 100%;
height: auto;
object-fit: cover;
}
/* Flexbox στο swiper-wrapper των thumbnails */
#thumbs-swiper-2 .swiper-wrapper {
display: flex !important;
justify-content: center !important; /* Οριζόντια κεντράρισμα */
align-items: center !important; /* Κατακόρυφο κεντράρισμα */
}
/* Τα slides να είναι auto width, χωρίς margin */
#thumbs-swiper-2 .swiper-slide {
width: auto !important;
opacity: 0.4;
cursor: pointer;
margin: 0 5px;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#thumbs-swiper-2 .swiper-slide-thumb-active {
opacity: 1;
}
#thumbs-swiper-2 .swiper-slide img {
width: 100% !important;
height: auto !important;
object-fit: cover;
display: block;
margin: 0 auto;
}
document.addEventListener('DOMContentLoaded', function () {
setTimeout(function() {
const thumbsSwiper = new Swiper('#thumbs-swiper-2', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
breakpoints: {
768: { slidesPerView: 5 },
480: { slidesPerView: 3 }
}
});
const mainSwiper = new Swiper('#main-swiper-2', {
spaceBetween: 10,
thumbs: {
swiper: thumbsSwiper
}
});
}, 0);
});
