Layouter Hero Image Slider

Discussion Ask a question
,
1

I’m trying to create a hero slider for my site using layouter. However, I’m finding that the scroll is not set to the full width of the image.

The test page for this can be found at https://www.clcorbin.co/blank-2

My code is below, any help would be greatly appreciated!

$w.onReady(function () {

 let repeater = $w('#repeater3');
 let leftSliderBtn = $w('#leftSliderBtn');
 let rightSliderBtn = $w('#rightSliderBtn');
 let counter = 0;

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

function autoSlide() {
        slideRight()
        setTimeout(autoSlide, 3000);
 }
    autoSlide()
    
    function slideRight() {
        counter++;
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
 let documentWidth = windowSizeInfo.document.width;
 let moveDistance = documentWidth * 0.65; // Container width

 if (counter >= 3) {
                    wixAnimations.timeline().add(repeater, { x: -(counter * moveDistance), duration: 300, easing: 'easeOutSine' }).play()
                        .onComplete(() => {
                            wixAnimations.timeline().add(repeater, { x: 0, duration: 0, easing: 'easeOutSine' }).play();
                            counter = 0;
                        })
                } 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 * 1; // Container width

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