diff --git a/assets/js/vendors/carousel.js b/assets/js/vendors/carousel.js index 5e82fa7b2019dc5ffdbed9826c304c36e2d20fed..b9f7130796c83587c4c2572140eb75479357f8e4 100644 --- a/assets/js/vendors/carousel.js +++ b/assets/js/vendors/carousel.js @@ -35,9 +35,12 @@ class Carousel { this.splide.on('autoplay:play', () => { toggleButton.classList.add('is-active'); + console.log(toggleButton) }); this.splide.on('autoplay:playing', (rate) => { + // toggleButton.classList.add('is-active'); + var activeStepButton = this.splide.root.querySelector('.splide__pagination .is-active i'); activeStepButton.style.width = rate * 100 + '%'; }); diff --git a/assets/sass/_theme/blocks/testimonials.sass b/assets/sass/_theme/blocks/testimonials.sass index f9f1a713ae707676809615c3fcbd320830a3764c..a53119c66d8e470e3ec29a19c95d30dbc024e7e1 100644 --- a/assets/sass/_theme/blocks/testimonials.sass +++ b/assets/sass/_theme/blocks/testimonials.sass @@ -39,7 +39,7 @@ display: flex flex-direction: column-reverse &__toggle - @include button-reset + // @include button-reset border: 1px solid $block-testimonials-pagination-background border-radius: 50% font-size: 0 @@ -58,7 +58,7 @@ &:not(.is-active) + .splide__pagination .is-active i - width: 100% !important + width: 100% .splide__play &::before diff --git a/assets/sass/_theme/dependencies/splide.sass b/assets/sass/_theme/dependencies/splide.sass index e667a6eb140c55e1f0c999f53656f43c4e45df25..d9c28c7c0d17128e5d54126a3125bfdcc8fd0e6d 100644 --- a/assets/sass/_theme/dependencies/splide.sass +++ b/assets/sass/_theme/dependencies/splide.sass @@ -41,10 +41,10 @@ background-color: $link-color &__toggle - .splide__toggle__pause + &__pause @include icon-block(pause) display: none - .splide__toggle__play + &__play @include icon-block(play) display: inline-block &.is-active