add swiper paginations to template & js settings with styling bullets

goldipl · Jun 13, 2024 · ae25c4d · ae25c4d
1 parent b7eac03
commit ae25c4d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -591,6 +591,7 @@ <h3>Szafy z lustrem</h3>
                         </div>
                     </a>
                 </div>
+                <div class="swiper-pagination"></div>
                 <!-- Add navigation buttons if desired -->
                 <div class="swiper-button-next fav-swiper-next"></div>
                 <div class="swiper-button-prev fav-swiper-prev"></div>
@@ -638,6 +639,7 @@ <h3>werikon</h3>
                         </div>
                     </a>
                 </div>
+                <div class="swiper-pagination"></div>
                 <!-- Add navigation buttons if desired -->
                 <div class="swiper-button-next garden-time-swiper-next"></div>
                 <div class="swiper-button-prev garden-time-swiper-prev"></div>

diff --git a/js/home-swipers.js b/js/home-swipers.js
@@ -21,6 +21,10 @@ document.addEventListener('DOMContentLoaded', () => {
     slidesPerView: 5,
     slidesPerGroup: 1,
     spaceBetween: 20,
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+    },
     navigation: {
       nextEl: '.swiper-button-next.sale-swiper-next',
       prevEl: '.swiper-button-prev.sale-swiper-prev',
@@ -131,6 +135,7 @@ document.addEventListener('DOMContentLoaded', () => {
     slidesPerGroup: 1,
     pagination: {
       el: '.swiper-pagination',
+      clickable: true,
     },
     navigation: {
       nextEl: '.swiper-button-next.bundle-promo-swiper-next',

diff --git a/sass/home/_hero_swiper.scss b/sass/home/_hero_swiper.scss
@@ -14,13 +14,15 @@
       &.mobile-hero-swiper {
         display: none;
       }
-      .swiper-pagination-bullet.swiper-pagination-bullet-active {
-        background-color: $furnipol_orange;
-      }
     }
   }
 }
 
+// Global swiper style
+.swiper-pagination-bullet.swiper-pagination-bullet-active {
+  background-color: $furnipol_orange;
+}
+
 @media (max-width: 760px) {
   .main-2-0 {
     #hero-swiper {

diff --git a/sass/main.css b/sass/main.css
@@ -99,7 +99,8 @@ body {
 .main-2-0 #hero-swiper .hero-swiper.mobile-hero-swiper {
   display: none;
 }
-.main-2-0 #hero-swiper .hero-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
+
+.swiper-pagination-bullet.swiper-pagination-bullet-active {
   background-color: #eb7d3f;
 }
 

diff --git a/sass/main.css.map b/sass/main.css.map