# Add navigation buttons to repeater or layouter (slider mode)

**URL:** <https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588>\
**Category:** Ask the community\
**Tags:** wix-studio, code, general\
**Created:** [January 19, 2021, 11:08am UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588 "2021-01-19T11:08:17Z")\
**Posts on this page:** 14\
**Page:** 3

<div class="post-metadata">

**Author:** ![charlotte-rougeul-we](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@charlotte-rougeul-we](https://forum.wixstudio.com/u/charlotte-rougeul-we)\
**Post date:** [February 9, 2022, 1:40pm UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/41 "2022-02-09T13:40:58Z")

</div>

Hello everyone!

Thank you so much for this solution! I’ve finally been able to make my first horizontal scrolling page :fire:

@jonathant i’m making an entire horizontal scrolling website. Is there a solution in order to switch from slide to slide with a hand touch (finger swipe) ? For example on the touch bar of a laptop or on tablettes and phones ?  
It will improve the user experience and the navigation.

Thank you,

Bests regards,

Charlotte

---

<div class="post-metadata">

**Author:** ![pneumaspace-au](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pneumaspace-au/32/32026_2.png) [@pneumaspace-au](https://forum.wixstudio.com/u/pneumaspace-au)\
**Post date:** [February 11, 2022, 2:51am UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/42 "2022-02-11T02:51:11Z")

</div>

I’m not aware of the solution for this but i think a workaround for it would be:

1. Choose not to display the container Jonathan shared, that’s only in the smaller viewports (Tablet, mobile)
2. Add another container/repeater again from scratch to these smaller viewports.
3. Set it as Slider (do not display scroll bar)

This design by default should be touch sensitive but does not work with a mouse, hence the reason why I mentioned you should keep Jonathans solution for the larger viewports.

---

<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 12, 2022, 8:24pm UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/43 "2022-02-12T20:24:47Z")

</div>

@jonathant I’m trying to recreate the same thing as your example with as a hero slider for my site. 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)

Also is there a cross fade animation option instead of sliding.

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

---

<div class="post-metadata">

**Author:** ![pneumaspace-au](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pneumaspace-au/32/32026_2.png) [@pneumaspace-au](https://forum.wixstudio.com/u/pneumaspace-au)\
**Post date:** [February 19, 2022, 3:40am UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/44 "2022-02-19T03:40:51Z")

</div>

Added additional lines for a different sized container width on each viewport  
(taken from another example Jon. made)

Not an expert so best to verify but works fine on all viewports.

```javascript

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world

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

$w.onReady(function () {

 let repeater = $w('#repeaterId');
 let leftSliderBtn = $w('#leftSliderBtnId');
 let rightSliderBtn = $w('#rightSliderBtnId');
 let counter = 0;

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

 function slideRight() {
        counter++;
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
 let windowWidth = windowSizeInfo.window.width;               
 let documentWidth = windowSizeInfo.document.width;
 let moveDistance = documentWidth;
  if (windowWidth > 1400) {
    moveDistance = documentWidth * 0.41; // Desktop 1 Container width
   } else if (windowWidth >= 1001) {
    moveDistance = documentWidth * 0.45; // Desktop 2 Container width
   } else if (windowWidth >= 751) {
    moveDistance = documentWidth * 0.6; // Tablet container width
   } else if (windowWidth <= 750) {
    moveDistance = documentWidth * 0.8; // Mobile container width
   }

 if (counter >= 3) {
                    wixAnimations.timeline().add(repeater, { x: -(counter * moveDistance), duration: 500, 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: 500, easing: 'easeOutSine' }).play();
                }
            });
    }
 function slideLeft() {
        counter--;
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
 let windowWidth = windowSizeInfo.window.width;               
 let documentWidth = windowSizeInfo.document.width;
 let moveDistance = documentWidth;
  if (windowWidth > 1400) {
    moveDistance = documentWidth * 0.41; // Desktop 1 Container width
   } else if (windowWidth >= 1001) {
    moveDistance = documentWidth * 0.45; // Desktop 2 Container width
   } else if (windowWidth >= 751) {
    moveDistance = documentWidth * 0.6; // Tablet container width
   } else if (windowWidth <= 750) {
    moveDistance = documentWidth * 0.8; // Mobile container width
   }

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

```

---

<div class="post-metadata">

**Author:** ![claudiolimongi](https://avatars.discourse-cdn.com/v4/letter/c/a183cd/32.png) [@claudiolimongi](https://forum.wixstudio.com/u/claudiolimongi)\
**Post date:** [July 27, 2022, 2:33pm UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/45 "2022-07-27T14:33:29Z")

</div>

Thank you all, and particularly, Jonathan, for this great solution.

@pneumaspace-au how did you solve the issue with the RIGHT button? I am facing a similar problem. It works until it reaches the 4th item, but after that it gets lost. The left button works fine.

I am using the same original code posted by Jonathan, with 4 items, and also 4 items in the collection.

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![stschuele](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@stschuele](https://forum.wixstudio.com/u/stschuele)\
**Post date:** [August 11, 2022, 12:45pm UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/46 "2022-08-11T12:45:48Z")

</div>

Hi, thank you Jonathan for your grate work. I now I’m little late to this post but I have one more question:

Is there a way to set up the size by a fix number like 500px? So the container is at 500px and not at 65%.

Do someone have a solution??? @ [Tenessee Vogel](https://www.editorxcommunity.com/profile/tenesseevogel/profile/) , @jonathant ?

---

<div class="post-metadata">

**Author:** ![JonathanT](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jonathant/32/24199_2.png) [@JonathanT](https://forum.wixstudio.com/u/JonathanT)\
**Post date:** [August 14, 2022, 6:43am UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/47 "2022-08-14T06:43:18Z")

</div>

Hey @stschuele , you can simply change the “moveDistance” to 500 or any amount of pixels you want it to move. I calculated the % in order to make it responsive 🙂

---

<div class="post-metadata">

**Author:** ![stschuele](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@stschuele](https://forum.wixstudio.com/u/stschuele)\
**Post date:** [August 14, 2022, 8:03am UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/48 "2022-08-14T08:03:13Z")

</div>

AAhhh thank you Jonathan it works!! I’ve also got a good solution with the new Layouter Slides mode cause its better for breakpoint and touch displays. The problem with that is, by clicking the next buttons you slide threw the whole list if you have more than one Item per raw. Not the best option. If you have the ability to set up to slide one Item at ones wether if there are more in a row like in this velo example, that would be great.

But thanks for your code! I think depending on what you work on, it is the better solution.

---

<div class="post-metadata">

**Author:** ![zafaryunusjhaveri](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/zafaryunusjhaveri/32/37388_2.png) [@zafaryunusjhaveri](https://forum.wixstudio.com/u/zafaryunusjhaveri)\
**Post date:** [May 12, 2023, 5:48am UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/49 "2023-05-12T05:48:27Z")

</div>

Hello everyone,  
This is very close to a problem I have been trying to solve.

I want to do the same thing as being discussed above, however I want to do it in a Vertical repeater rather than a Horizontal repeater as discussed above.

What I am trying to do is create a scrollable menu with text boxes in the repeater. Each text box will be linked to the opacity of an image in a container next to it. Also I want to make it so that any text box that is currently highlighted or is in the active position triggers the hover effect the text to make it larger whilst also triggering the hover effect on the image brining it’s opacity to 100%

Most importantly though I’d just like the buttons to start working but I just can’t figure it out. Can anyone tell me how to modify the code suggested by Johnathan to work for this please?

Thank you in advance!

For some reason I can’t attach an image. But is kind of like

```
                 Up Button 

```

Image. Text 1  
Text 2  
Test 3  
… all the way to Text 12  
Down Button

---

<div class="post-metadata">

**Author:** ![Amanda\_Moraes](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/amanda_moraes/32/101464_2.png) [@Amanda\_Moraes](https://forum.wixstudio.com/u/Amanda_Moraes)\
**Post date:** [December 10, 2024, 8:27pm UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/50 "2024-12-10T20:27:41Z")

</div>

Hey jonathant!

I tried this solution

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

$w.onReady(function () {

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

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

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

 if (counter > 3) {
                    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 - (windowSizeInfo.document.width * 0.047);
 let moveDistance = documentWidth * 0.65; // Container width

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

```

I’m facing a problem that, when I click on the navigation button, my repeater carousel doesn’t show the content that slide in the screen. It’s like my content doesn’t exist. Could you help me?

screenshot below

> **[Album — Postimages](https://postimg.cc/gallery/TG9jYgh)**

---

<div class="post-metadata">

**Author:** ![JonathanT](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jonathant/32/24199_2.png) [@JonathanT](https://forum.wixstudio.com/u/JonathanT)\
**Post date:** [December 11, 2024, 8:24am UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/51 "2024-12-11T08:24:47Z")

</div>

Hey!  
From first glance it looks like you’re moving the wrong element, but it’s hard to tell from screenshots.  
Mind sharing the url to your website?

---

<div class="post-metadata">

**Author:** ![Amanda\_Moraes](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/amanda_moraes/32/101464_2.png) [@Amanda\_Moraes](https://forum.wixstudio.com/u/Amanda_Moraes)\
**Post date:** [December 11, 2024, 1:05pm UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/52 "2024-12-11T13:05:29Z")

</div>

Sure!  
[https://amandamoraesadvsp.wixstudio.com/my-site-4?rc=test-site](https://amandamoraesadvsp.wixstudio.com/my-site-4?rc=test-site)

---

<div class="post-metadata">

**Author:** ![JonathanT](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jonathant/32/24199_2.png) [@JonathanT](https://forum.wixstudio.com/u/JonathanT)\
**Post date:** [December 12, 2024, 8:57am UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/53 "2024-12-12T08:57:46Z")

</div>

Thanks  
I see that you used a Slider layout, but unfortunately the code solution doesn’t work well with the Slider layout.  
You’ll need to choose which behavior you prefer. Also, you can choose to have an arrow navigation on Desktop and to disable to the code on Mobile and use Slider.  
Anyway, you need to change the layout to “Cards”  
Here’s a library I created with the Asset, so you can just add it to the stage

> **[Log In to Your Wix Account - Wix.com](https://users.wix.com/signin?forceRender=true)**
>
> Sign in to your Wix account to access the website editor and complete business solutions.

---

<div class="post-metadata">

**Author:** ![Attryb\_Tech](https://avatars.discourse-cdn.com/v4/letter/a/ed8c4c/32.png) [@Attryb\_Tech](https://forum.wixstudio.com/u/Attryb_Tech)\
**Post date:** [February 26, 2025, 1:23pm UTC](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588/55 "2025-02-26T13:23:23Z")

</div>

@JonathanT Thanks for this detailed solution.

I’m trying to implement the same solution but with a different setup: I have a repeater connected to a dataset. I want to display three items at the same time on screen. On clicking the next and previous buttons, it should move one card over. But it’s moving the entire set out of view after two clicks. Additionally, I can’t hardcode the item count as it can change over time. But for now, there are 20 items in the set being displayed.

I’ve set it up as a repeated with Cards, the width set to 660% to show three cards at a time on screen.

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

$w.onReady(function () {

 let repeater = $w('#repeater18');
 let leftSliderBtn = $w('#leftSlide');
 let rightSliderBtn = $w('#rightSlide');
 let counter = 0;
 let maxItems = 20;

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

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

 if (counter > 19) {
                    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();
                }
            });
			console.log("Counter :"+counter);
    }

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

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

```

Here’s the preview link for the site: [https://anil7263.wixstudio.com/movementology-clinic?rc=test-site](https://anil7263.wixstudio.com/movementology-clinic?rc=test-site)

It’s the second carousel in the Patients Journey section.

Any help would be appreciated.

Thanks

[Previous page](https://forum.wixstudio.com/t/add-navigation-buttons-to-repeater-or-layouter-slider-mode/48588.md?page=2)