From ba99349012eed35993b9b758d9ae04f61aba60a1 Mon Sep 17 00:00:00 2001
From: goldipl <mgodlewski92@gmail.com>
Date: Wed, 19 Jun 2024 18:18:06 +0200
Subject: [PATCH] improve swiper settings

---
 js/home-swipers.js | 88 +++++++++++++++++++++++++---------------------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/js/home-swipers.js b/js/home-swipers.js
index 7b108c6..9a5ce89 100644
--- 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,
+      },
     },
   });
+  
 
 });