From 6e08b3b6849e3c6433ca67e95a11cc9b321ad89c Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Thu, 21 Dec 2023 17:56:22 +0100
Subject: [PATCH] display progress bar when testimonial is selected
---
assets/js/vendors/carousel.js | 8 ++++++++
assets/sass/_theme/blocks/testimonials.sass | 7 +++----
2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/assets/js/vendors/carousel.js b/assets/js/vendors/carousel.js
index a7d64c2d..2aaba633 100644
--- a/assets/js/vendors/carousel.js
+++ b/assets/js/vendors/carousel.js
@@ -46,6 +46,7 @@ class Carousel {
this.splide.on('autoplay:pause', () => {
toggleButton.classList.remove('is-active');
+ var activeStepButton = this.splide.root.querySelector('.splide__pagination .is-active i');
});
elements.forEach(element => {
@@ -57,6 +58,13 @@ class Carousel {
this.splide.on('drag', () => {
autoplay.pause();
});
+
+ stepButtons.forEach((stepButton) => {
+ const progressBar = stepButton.querySelector('i');
+ stepButton.addEventListener('click', () => {
+ progressBar.style.removeProperty("width");
+ })
+ });
}
}
diff --git a/assets/sass/_theme/blocks/testimonials.sass b/assets/sass/_theme/blocks/testimonials.sass
index ebaa47ef..338da011 100644
--- a/assets/sass/_theme/blocks/testimonials.sass
+++ b/assets/sass/_theme/blocks/testimonials.sass
@@ -56,10 +56,9 @@
color: $color-accent
&::before
font-size: 42px
- &:not(.is-active)
- + .splide__pagination
- .is-active i
- width: 100%
+ .splide__pagination
+ .is-active i
+ width: 100%
.splide__play
&::before
--
GitLab