   const mpSlider = document.querySelector('.multi-px-slider');
   let interleaveOffset = 0.5;

   const smallSlider = new Swiper('.sm-slider', {
       touchRatio: 0,
       loop: true,
       slidesPerView: 'auto',
       preloadImages: false,
       lazy: {
           loadPrevNext: true,
           loadPrevNextAmount: 2,
       },
       watchSlidesProgress: true,
       watchSlidesVisibility: true,
       on: {
           init: function () {
               let swiper = this;
           },
           lazyImageReady: function () {
               let swiper = this;

               setTimeout(function () {
                   swiper.update();
               }, 500);
           },
           progress: function () {
               let swiper = this;
               for (let i = 0; i < swiper.slides.length; i++) {
                   let slideProgress = swiper.slides[i].progress,
                       innerOffset = swiper.width * interleaveOffset,
                       innerTranslate = slideProgress * innerOffset;
                   swiper.slides[i].querySelector(".img-sm").style.transform = "translateX(" + innerTranslate + "px)";
               }
           },
           touchStart: function () {
               let swiper = this;
               for (let i = 0; i < swiper.slides.length; i++) {
                   swiper.slides[i].style.transition = "";
               }
           },
           setTransition: function (speed) {
               let swiper = this;
               for (let i = 0; i < swiper.slides.length; i++) {
                   swiper.slides[i].style.transition = speed + "ms";
                   swiper.slides[i].querySelector(".img-sm").style.transition = speed + "ms";
               }
           }
       }
   });


   const largeSlider = new Swiper('.lg-slider', {
       parallax: true,
       loop: true,
       speed: 2000,
       slidesPerView: 'auto',
       preloadImages: false,
       lazy: {
           loadPrevNext: true,
           loadPrevNextAmount: 2,
       },
       watchSlidesProgress: true,
       watchSlidesVisibility: true,
       touchEventsTarget: 'wrapper',
       controller: {
           control: smallSlider
       },
       on: {
           init: function () {
               let swiper = this;
           },
           lazyImageReady: function () {
               let swiper = this;

               setTimeout(function () {
                   swiper.update();
                   mpSlider.classList.remove('loading');
               }, 500);
           },
           progress: function () {
               let swiper = this;
               for (let i = 0; i < swiper.slides.length; i++) {
                   let slideProgress = swiper.slides[i].progress,
                       innerOffset = swiper.width * interleaveOffset,
                       innerTranslate = slideProgress * innerOffset;
                   swiper.slides[i].querySelector(".img-lg").style.transform = "translateX(" + innerTranslate + "px)";
               }
           },
           touchStart: function () {
               let swiper = this;
               for (let i = 0; i < swiper.slides.length; i++) {
                   swiper.slides[i].style.transition = "";
               }
           },
           setTransition: function (speed) {
               let swiper = this;
               for (let i = 0; i < swiper.slides.length; i++) {
                   swiper.slides[i].style.transition = speed + "ms";
                   swiper.slides[i].querySelector(".img-lg").style.transition = speed + "ms";
               }
           }
       }
   });


   let slideDelay = 2000;
   let $mpsArrow = $('.mps-arrow');

   function runAnimation() {
       mpSlider.classList.add('is-animating');
   }

   function endAnimation() {
       mpSlider.classList.remove('is-animating');
   }


   $mpsArrow.each((i, el) => {
       const _this = $(el);

       _this.on('click', function () {

           $mpsArrow.prop('disabled', true);
           runAnimation();

           if (_this.hasClass('mps-prev')) {
               setTimeout(() => {
                   largeSlider.slidePrev();
               }, slideDelay)
           } else if (_this.hasClass('mps-next')) {
               setTimeout(() => {
                   largeSlider.slideNext();
               }, slideDelay)
           }

           const curtain = document.querySelector('.curtain');
           curtain.addEventListener('animationend', () => {
               $mpsArrow.prop('disabled', false);
               endAnimation();
           });

       })

   })
   let mpsInViewport = true;

   if (mpsInViewport) {
       $(document).off('keyup').on('keyup', function (e) {
           if (e.keyCode == '37') {
               $('.mps-prev').trigger('click');
           } else if (e.keyCode == '39') {
               $('.mps-next').trigger('click');
           }
       });
   }


