fix splide slide opacity on move

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 () {

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)