improve swiper settings

goldipl · Jun 19, 2024 · ba99349 · ba99349
1 parent 5700be1
commit ba99349
Showing 1 changed file with 47 additions and 41 deletions.
diff --git a/js/home-swipers.js b/js/home-swipers.js
@@ -157,9 +157,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const living_room_tabs_swiper = new Swiper('.living-room-tabs-swiper', {
     direction: 'horizontal',
-    slidesPerView: 3,
-    slidesPerGroup: 1,
     freeMode: true,
+    slidesPerView: 2.5,
+    slidesPerGroup: 1,
     pagination: {
       el: '.swiper-pagination',
       clickable: true,
@@ -169,24 +169,25 @@ document.addEventListener('DOMContentLoaded', () => {
       prevEl: '.swiper-button-prev.living-room-tabs-swiper-prev',
     },
     breakpoints: {
-      760: {
-        slidesPerView: 1,
+      // Mobile view
+      0: {
+        slidesPerView: 1.1,
         slidesPerGroup: 1,
-      },
-      200: {
-        slidesPerView: 'auto',
         centeredSlides: true,
-        slidesPerView: 1,
-        slidesPerGroup: 1,
         spaceBetween: 20,
       },
+      // Desktop view
+      1220: {
+        slidesPerView: 2.5,
+        slidesPerGroup: 1,
+      },
     },
   });
 
   const bedroom_tabs_swiper = new Swiper('.bedroom-tabs-swiper', {
     direction: 'horizontal',
     freeMode: true,
-    slidesPerView: 3,
+    slidesPerView: 2.5,
     slidesPerGroup: 1,
     pagination: {
       el: '.swiper-pagination',
@@ -197,24 +198,25 @@ document.addEventListener('DOMContentLoaded', () => {
       prevEl: '.swiper-button-prev.bedroom-tabs-swiper-prev',
     },
     breakpoints: {
-      760: {
-        slidesPerView: 1,
+      // Mobile view
+      0: {
+        slidesPerView: 1.1,
         slidesPerGroup: 1,
-      },
-      200: {
-        slidesPerView: 'auto',
         centeredSlides: true,
-        slidesPerView: 1,
-        slidesPerGroup: 1,
         spaceBetween: 20,
       },
+      // Desktop view
+      1220: {
+        slidesPerView: 2.5,
+        slidesPerGroup: 1,
+      },
     },
   });
 
   const children_room_tabs_swiper = new Swiper('.children-room-tabs-swiper', {
     direction: 'horizontal',
     freeMode: true,
-    slidesPerView: 3,
+    slidesPerView: 2.5,
     slidesPerGroup: 1,
     pagination: {
       el: '.swiper-pagination',
@@ -225,24 +227,25 @@ document.addEventListener('DOMContentLoaded', () => {
       prevEl: '.swiper-button-prev.children-room-tabs-swiper-prev',
     },
     breakpoints: {
-      760: {
-        slidesPerView: 1,
+      // Mobile view
+      0: {
+        slidesPerView: 1.1,
         slidesPerGroup: 1,
-      },
-      200: {
-        slidesPerView: 'auto',
         centeredSlides: true,
-        slidesPerView: 1,
-        slidesPerGroup: 1,
         spaceBetween: 20,
       },
+      // Desktop view
+      1220: {
+        slidesPerView: 2.5,
+        slidesPerGroup: 1,
+      },
     },
   });
 
   const bathroom_tabs_swiper = new Swiper('.bathroom-tabs-swiper', {
     direction: 'horizontal',
     freeMode: true,
-    slidesPerView: 3,
+    slidesPerView: 2.5,
     slidesPerGroup: 1,
     pagination: {
       el: '.swiper-pagination',
@@ -253,24 +256,25 @@ document.addEventListener('DOMContentLoaded', () => {
       prevEl: '.swiper-button-prev.bathroom-tabs-swiper-prev',
     },
     breakpoints: {
-      760: {
-        slidesPerView: 1,
+      // Mobile view
+      0: {
+        slidesPerView: 1.1,
         slidesPerGroup: 1,
-      },
-      200: {
-        slidesPerView: 'auto',
         centeredSlides: true,
-        slidesPerView: 1,
-        slidesPerGroup: 1,
         spaceBetween: 20,
       },
+      // Desktop view
+      1220: {
+        slidesPerView: 2.5,
+        slidesPerGroup: 1,
+      },
     },
   });
 
   const kitchen_tabs_swiper = new Swiper('.kitchen-tabs-swiper', {
     direction: 'horizontal',
     freeMode: true,
-    slidesPerView: 3,
+    slidesPerView: 2.5,
     slidesPerGroup: 1,
     pagination: {
       el: '.swiper-pagination',
@@ -281,18 +285,20 @@ document.addEventListener('DOMContentLoaded', () => {
       prevEl: '.swiper-button-prev.kitchen-tabs-swiper-prev',
     },
     breakpoints: {
-      760: {
-        slidesPerView: 1,
+      // Mobile view
+      0: {
+        slidesPerView: 1.1,
         slidesPerGroup: 1,
-      },
-      200: {
-        slidesPerView: 'auto',
         centeredSlides: true,
-        slidesPerView: 1,
-        slidesPerGroup: 1,
         spaceBetween: 20,
       },
+      // Desktop view
+      1220: {
+        slidesPerView: 2.5,
+        slidesPerGroup: 1,
+      },
     },
   });
+
 
 });