# Layouter Hero Image Slider

**URL:** <https://forum.wixstudio.com/t/layouter-hero-image-slider/6176>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [February 15, 2022, 5:22pm UTC](https://forum.wixstudio.com/t/layouter-hero-image-slider/6176 "2022-02-15T17:22:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![info29628](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/info29628/32/29708_2.png) [@info29628](https://forum.wixstudio.com/u/info29628)\
**Post date:** [February 15, 2022, 5:22pm UTC](https://forum.wixstudio.com/t/layouter-hero-image-slider/6176/1 "2022-02-15T17:22:50Z")

</div>

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](https://www.clcorbin.co/blank-2)

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

```javascript
$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();
                }
            });
    }
});

```