diff --git a/assets/js/vendors/carousel.js b/assets/js/vendors/carousel.js index 59d6cf3e6741a841b0b0b093170c51ab1e12dc4e..0da736c6d7c3e97f1e7c244bcbe82a282bdd268d 100644 --- a/assets/js/vendors/carousel.js +++ b/assets/js/vendors/carousel.js @@ -20,28 +20,29 @@ class Carousel { } init () { - var splide = new Splide(this.element).mount(), - toggleButton = splide.root.querySelector('.splide__autoplay'), - stepButtons = splide.root.querySelectorAll('.splide__pagination button'), - elements = splide.root.querySelectorAll('.splide__pagination, .splide__slide'), - autoplay = splide.Components.Autoplay; + this.splide = new Splide(this.element).mount(); + const toggleButton = this.splide.root.querySelector('.splide__autoplay'), + stepButtons = this.splide.root.querySelectorAll('.splide__pagination button'), + elements = this.splide.root.querySelectorAll('.splide__pagination, .splide__slide'), + autoplay = this.splide.Components.Autoplay; + this.listen(); if (toggleButton) { stepButtons.forEach((stepButton) => { stepButton.innerHTML = '<i></i>'; }); - splide.on('autoplay:play', function () { + this.splide.on('autoplay:play', function () { toggleButton.classList.add('is-active'); }); - splide.on('autoplay:playing', function (rate) { - var activeStepButton = splide.root.querySelector('.splide__pagination .is-active i'); + this.splide.on('autoplay:playing', function (rate) { + var activeStepButton = this.splide.root.querySelector('.splide__pagination .is-active i'); activeStepButton.style.width = rate * 100 + '%'; }); - splide.on('autoplay:pause', function () { + this.splide.on('autoplay:pause', function () { toggleButton.classList.remove('is-active'); }); @@ -51,11 +52,21 @@ class Carousel { }) }); - splide.on('drag', function() { + this.splide.on('drag', function() { autoplay.pause(); }); } } + + listen() { + this.splide.on('move', function() { + this.splide.root.classList.add('is-moving') + }.bind(this)); + + this.splide.on('moved', function() { + this.splide.root.classList.remove('is-moving') + }.bind(this)); + } } (function () { diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass index 402127127a2a3f1c7d9e4bcf18766ad29085b821..9a2324a8022a73c5d1569aa0d94a073573c6853d 100644 --- a/assets/sass/_theme/blocks/gallery.sass +++ b/assets/sass/_theme/blocks/gallery.sass @@ -63,6 +63,10 @@ .splide display: flex flex-direction: column + @include in-page-with-sidebar + &.is-moving + .splide__slide.is-active + opacity: 0.1 &__track overflow: visible margin-right: half(-$grid-gutter-sm)