diff --git a/assets/js/vendors/carousel.js b/assets/js/vendors/carousel.js index a7d64c2d41d1d2c44bb9e4d765f16131d97b29fd..2aaba633f9b1cc66ad0f471f705ea74e33cdb783 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 ebaa47efa3c6d8965089c660fcac7e3353f5055b..338da01140524b2eae8277d0e7fa6c5559f939cf 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