KAW-7686 Udpate the carousel buttons styles

Netcentric · Jul 30, 2024 · be3f860 · be3f860
1 parent 0c4579f
commit be3f860
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
@@ -22,5 +22,29 @@
 }
 
 .carousel .transition-effect {
-  transition: transform 300ms ease-in-out;
-}
+  transition: transform 500ms ease;
+}
+
+.carousel-nav {
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.carousel-nav-button {
+  background-color: #fff;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transition: 0.2s ease-in-out;
+  transition-property: color, background-color, border-color, box-shadow;
+  border: 1px solid rgb(29 29 27 / 40%);
+  padding: 0;
+}
+
+.carousel-nav-button-active {
+  background-color: rgb(29 29 27 / 60%);
+  border-color: transparent;
+}
diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js
@@ -1,3 +1,5 @@
+import { getTextLabel } from '../../scripts/scripts.js';
+
 const getCarouselPadding = (itemIndex) => `calc(-1 * (${itemIndex - 0.5} * var(--slide-width) + var(--slide-gap) * ${itemIndex - 1}))`;
 
 const recalcSlidePositions = (slides, activeSlideIndex, direction) => {
@@ -54,6 +56,7 @@ const supportSwiping = (swipeEl, onSwipe) => {
 
   const handleSwipe = () => {
     const minSwipeDistance = 50;
+
     if (touchEndX < touchStartX - minSwipeDistance) {
       // swipe left - next slide
       onSwipe('next');
@@ -97,9 +100,13 @@ export default async function decorate(block) {
   `);
 
   const carouselNav = document.createRange().createContextualFragment(
-    `<div class="carousel-nav">
-      ${slides.map((slide, index) => `<button>${index}</button>`).join('')}
-    </div>`,
+    `<ul class="carousel-nav">
+      ${slides.map((_, index) => `
+        <li class="carousel-nav-item">
+          <button class="carousel-nav-button">${getTextLabel('Slide')} ${index}</button>
+        </li>
+      `).join('')}
+    </ul>`,
   );
 
   block.append(slideWrapper);
@@ -109,6 +116,13 @@ export default async function decorate(block) {
   let activeSlideIndex = 0;
   let prevActiveSlideIndex = 0;
 
+  const getActiveSlideIndex = () => activeSlideIndex;
+
+  const setActiveSlideIndex = (value) => {
+    prevActiveSlideIndex = activeSlideIndex;
+    activeSlideIndex = value;
+  };
+
   recalcSlidePositions(slides, activeSlideIndex, null);
 
   [...block.querySelectorAll('.carousel-buttons button')].forEach((button, btnIndex) => {