@arrow-ecs/reflex
Version:
Reflex UI library
82 lines (78 loc) • 2.3 kB
JavaScript
const initializeCarousel = () => {
const carousels = document.querySelectorAll('.swiper');
if (!carousels || !carousels.length) { return false; }
for (const carousel of carousels) {
const breakpoints = carousel.getAttribute('data-breakpoints');
const breakpointData = breakpoints ? JSON.parse(breakpoints) : null;
const carouselCard = carousel.parentElement ? carousel.parentElement.classList.contains('carousel-card') : false;
if (carouselCard) {
const galleryThumbs = new Swiper('.gallery-thumbs', {
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
breakpoints: breakpointData || {
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 16
},
// when window width is >= 577px
577: {
slidesPerView: 2,
spaceBetween: 24
},
// when window width is >= 992px
992: {
slidesPerView: 3,
spaceBetween: 24
},
// when window width is >= 1441px
1441: {
slidesPerView: 4,
spaceBetween: 24
}
}
});
const galleryTop = new Swiper('.gallery-top', {
spaceBetween: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
} else {
const swiper = new Swiper('.swiper-container', {
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: breakpointData || {
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 16
},
// when window width is >= 577px
577: {
slidesPerView: 2,
spaceBetween: 24
},
// when window width is >= 992px
992: {
slidesPerView: 3,
spaceBetween: 24
},
// when window width is >= 1441px
1441: {
slidesPerView: 4,
spaceBetween: 24
}
}
});
}
}
}