Editor X : Adding custom navigation buttons to repeater / layouter

Ask the community
,
1

Hi everyone,

I am a bit desperate and blocked in my project. Below is a code that the Editor X’s Team has shared to help me. I have edited it accordingly to his indications, and here’s the live result ( mobile breakpoints not optimized again ) : https://www.stage.studioshapeshift.com/who-we-are

As you can see, the result is very buggy. Could you tell me what I have missed, please ?

Thanks in advance for your help and return on this try.

import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';

$w.onReady(function () {

 let repeater = $w('#aboutslider');
 let leftSliderBtn = $w('#back');
 let rightSliderBtn = $w('#next');
 let counter = 3;

    rightSliderBtn.onClick(() => {
        slideRight();
    })
    leftSliderBtn.onClick(() => {
        slideLeft();
    })

 function slideRight() {
        counter++;
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
 let documentWidth = windowSizeInfo.document.width;
 let moveDistance = documentWidth * 0.68; // Container width

 if (counter > 0) {
                    wixAnimations.timeline().add(repeater, { x: -(counter * moveDistance), duration: 300, easing: 'easeOutSine' }).play()
                } else {
                    wixAnimations.timeline().add(repeater, { x: -(counter * moveDistance), duration: 300, easing: 'easeOutSine' }).play();
                }
            });
    }

 function slideLeft() {
        counter--;
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
 let documentWidth = windowSizeInfo.document.width;
 let moveDistance = documentWidth * 0.68; // Container width

 if (counter < 0) {
                    wixAnimations.timeline().add(repeater, { x: (repeater.data.length - 1) * -moveDistance, duration: 300, easing: 'easeOutSine' }).play();
                    counter = 0;
                } else {
                    wixAnimations.timeline().add(repeater, { x: counter * -moveDistance, duration: 300, easing: 'easeOutSine' }).play();
                }
            });
    }
});