-
-
-
-
-
-
-
-
-
+
+
+
+
-
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
-
+
diff --git a/js/index-carousel.js b/js/index-carousel.js
new file mode 100644
index 0000000..aba54e1
--- /dev/null
+++ b/js/index-carousel.js
@@ -0,0 +1,54 @@
+const carouselTrack = document.querySelector('.gallery__track');
+const prevArrow = document.querySelector('.gallery__arrow--prev');
+const nextArrow = document.querySelector('.gallery__arrow--next');
+const centerArrow = document.querySelector('.gallery__arrow--center');
+
+if (carouselTrack) {
+ const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
+ const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
+ let itemsPerPage = getItemsPerPage();
+ const pageCount = Math.ceil(items.length / itemsPerPage);
+ let activePage = 0;
+
+ function scrollToPage(page) {
+ activePage = page;
+ const pageWidth = carouselTrack.clientWidth;
+ carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
+ }
+
+ function showNext() {
+ activePage = (activePage + 1) % pageCount;
+ scrollToPage(activePage);
+ }
+
+ function showPrev() {
+ activePage = (activePage - 1 + pageCount) % pageCount;
+ scrollToPage(activePage);
+ }
+
+ function refreshCarousel() {
+ const responsiveItemsPerPage = getItemsPerPage();
+ if (responsiveItemsPerPage !== itemsPerPage) {
+ itemsPerPage = responsiveItemsPerPage;
+ window.location.reload();
+ }
+ }
+
+ if (nextArrow) nextArrow.addEventListener('click', showNext);
+ if (prevArrow) prevArrow.addEventListener('click', showPrev);
+ if (centerArrow) centerArrow.addEventListener('click', showNext);
+
+ document.addEventListener('keydown', (event) => {
+ if (event.key === 'ArrowRight') {
+ showNext();
+ }
+ if (event.key === 'ArrowLeft') {
+ showPrev();
+ }
+ });
+
+ window.addEventListener('resize', () => {
+ refreshCarousel();
+ scrollToPage(activePage);
+ });
+}
Invité Events
+
+ 
+ 
+
+
+