@jonathant Thank you very much !!! Now, it’s perfect 
that shapeshifter site is an awesome site! How did you do the menu button animation and the main “Devis gratuit” button animation? Is that a video playing in a loop?
@jonathant Hi! Thanks so much for the code! I have it functioning with ‘autoslide’ and it works great!
But, is it possible to say, if I press the navigation button, the autoslide turns off? Because at the moment it kind of fights with the button presses if you know what I mean.
If so, is it also possible to have the autoslide turn back on after a few seconds?
Kind regards, Tenessee
Hey everyone! And thank you @jonathant for this great set of code!
Does anyone know how to adapt this to a set of repeater items that extend past the container like below?
In this case, there is 7 in total, each 500px in width.
Thank you again! I have been talking with the dev team on a solution here for months. This is great.
@info18491 Hi, because we are working with the overflow of the container, in theory, you can dock the container to the right (like in your picture) and adjust the width to your design. Just make sure to reflect that width in the code.
The code provided above creates a slider with the repeater items taking up the full width of the container. So if you had 3 items for example, you would set the repeater width to 300% of the containers width.
So in your case, you said you have 7 items. And it seems like you want to display 3 items at one time, so what you can do is:
Set your repeater width to 240%
Make sure in the code: let counter = 0
In the part of the code that says //Container width change the number to 0.3428
This should make it pretty close to your desired results. You can play around with the numbers to further improve the sliding.
Sorry, I forgot to mention: the //container width part in the code is just basically the move distance per item.
So if your item is 40% container width (3 items visible at one time), and your container width is 70%, (because 70/3 = 23.333) make the move distance number 0.23333 and see how it looks.
You can adjust this number to your liking.
Here I built it for you:
https://tenesseevogel.editorx.io/slidingrepeater
Here’s the code:
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 = 0;
rightSliderBtn.onClick(() => {
slideRight();
})
leftSliderBtn.onClick(() => {
slideLeft();
})
function slideRight() {
counter++;
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let documentWidth = windowSizeInfo.document.width;
let moveDistance = documentWidth * 0.285; // Container width
if (counter > 4) {
wixAnimations.timeline().add(repeater, { x: -(counter * moveDistance), duration: 400, 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: 400, easing: 'easeOutSine' }).play();
}
});
}
function slideLeft() {
counter--;
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let documentWidth = windowSizeInfo.document.width;
let moveDistance = documentWidth * 0.285; // Container width
if (counter < 0) {
wixAnimations.timeline().add(repeater, { x: (repeater.data.length - 7) * -moveDistance, duration: 400, easing: 'easeOutSine' }).play();
counter = 5;
} else {
wixAnimations.timeline().add(repeater, { x: counter * -moveDistance, duration: 400, easing: 'easeOutSine' }).play();
}
});
}
});
@tenesseevogel Thank you so much! This has helped a great deal! 
@tenesseevogel @jonathant I’m trying to use your code to do a fullscreen slideshow.
I’m trying to understand the numbers/units/math…but it’s not making sense/working to me. Can anyone explain it?
Am I wrong in thinking that I would just change the masking container to 100% and then adjust your code to 100 for the container width in the code?
This doesn’t work though.
here’s what I have:
any help is MUCH appreciated…(been waiting for slideshow functionality in editor x since like…January…and trying to figure out a way to do it with repeaters or layouters for forever. Ugh.)
This is the closest I’ve come…but it’s still not working.
import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';
$w.onReady(function () {
let repeater = $w('#heroSlider');
let leftSliderBtn = $w('#leftArrow');
let rightSliderBtn = $w('#rightArrow');
let counter = 0;
rightSliderBtn.onClick(() => {
slideRight();
})
leftSliderBtn.onClick(() => {
slideLeft();
})
function slideRight() {
counter++;
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let documentWidth = windowSizeInfo.document.width;
let moveDistance = documentWidth * 100; // 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;
let moveDistance = documentWidth * 100; // 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();
}
});
}
});
Hi @corey , thanks for sharing your code.
Your are completely right in thinking that if you change the container to 100% screen width, you can achieve a full screen slider.
It seems like you have made a small mistake in your code.
Next to //Container width, make that number 1.
As you can see in the code on that line, you are telling the move distance to = the document width times (*) a specified number. Right now you are telling it to move the distance of the document width times 100, so 100 times the width of your document.
That’s all I can point out at the moment, do feel free to ask if you have any more issues with the functionality 
-Tenessee
Hi @jonathant ,
First of all thank you for creating a solution for this.
I got it working somehow almost. It is still a bit buggy and I can’t figure out whats wrong.
I’m using a layouter, got the container setup like you said and added the code. Somehow it buggs out like going further or further back then the width of the container.
The page is: https://inasuit.nl/blank-1
import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';
$w.onReady(function () {
let repeater = $w('#box22');
let leftSliderBtn = $w('#button11');
let rightSliderBtn = $w('#button12');
let counter = 0;
rightSliderBtn.onClick(() => {
slideRight();
})
leftSliderBtn.onClick(() => {
slideLeft();
})
function slideRight() {
counter++;
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let documentWidth = windowSizeInfo.document.width;
let moveDistance = documentWidth * 1; // Container width
if (counter > 1) {
wixAnimations.timeline().add(repeater, { x: -(counter * moveDistance), duration: 400, 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: 400, 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: -(counter * moveDistance), duration: 400, easing: 'easeOutSine' }).play()
.onComplete(() => {
wixAnimations.timeline().add(repeater, { x: 0, duration: 0, easing: 'easeOutSine' }).play();
counter = 2;
})
} else {
wixAnimations.timeline().add(repeater, { x: counter * -moveDistance, duration: 400, easing: 'easeOutSine' }).play();
}
});
}
});
I am kinda new to Editor X but I love it so far. If you want to help and you need more info then I gladly hear from you!
-Klaas
Hey @klaaspostma , it seems like your Layouter is docked to the right with negative margins, and I guess that’s what’s causing it to crop.
Your Layouter should be docked to the left with 0 margins.
Regarding the code, it’s built to provide an effect of a loop, therefore it’s looking for the 3rd item and only then jumps back to the start 
It seems like you have only 2 items, so you just need to do these steps:
- Duplicate the first item, and place the duplicate to be 3rd in order
- Change your Layouter’s width to 300%
Let me know if you managed to fix it, or need additional help
And good job on your website, looking good 
Hi @jonathant , For some reason it was docked to the right. Don’t know how that happend. It tends to do that a lot sometimes even without me docking it there.
I’ve made the layouter to 300% and copied the first container and added it as last item. It works like a charm now. The only thing I find annoying is by adding another item I can’t seem to get that item on my screen for editing because of the massive width the layouter has. So the new item is outside of the screen. Just wondering but do you know something to make this easier?
Anyway thank you for helping and by further questions you will hear from me.
And thanks. Trying to make something nice of it.
@tenesseevogel Wow! this is just perfect, thank you man!
Thanks for sharing Jonathan.
Could you please give me some input on a problem I’m currently facing while implementing your solution? (if you get a chance that is)
So I’m currently running a Repeater > Inside a Container
- Container is set to 65% width for demonstration purposes.
- The Repeater is aligned inside the container, docked to left & top with 0px margins and stretched to 400% width (total of four slides)
Previewing that:
Only left button appears to be working.
Right button initially jumps all the slides.
Is this solution still working or I’m I doing something wrong here?
Cheers in advance 
let repeater = $w ( ‘#slideMe’ );
let leftSliderBtn = $w ( ‘#leftSliderBtn’ );
let rightSliderBtn = $w ( ‘#rightSliderBtn’ );
let counter = 4 ;
(Above is everything that has been altered from code you previously shared)
https://www.editorx.com/feedback-ng/feedback/e5bb384e-2f35-469b-a369-6e18ae6e9b3b
*Just an update here:
Managed to sort most of it. Only problem that still remains is that right slide function does not like to loop back to first item after sliding through all items.
Looks like your Repeater is docked to the right.
The code shouldn’t support right docking, so I guess you’ve added something?
Can you share the rest of your code as well?
Sure thingo Jonathan and much appreciated for the follow up.
import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';
$w.onReady(function () {
let repeater = $w('#slideMe');
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;
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;
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();
}
});
}
});
- Parent container is centered with some margins on the bottom.
- The actual slider has been docked to the left & top with 0 margins, as you have already explained to someone above who was experiencing a similar issue.
*Changed some of the colours a little and position of buttons but code shared above remains the same, including all the settings.
All goodie, sorted. Added some of the latter code you posted on the right along with the duplication of the first item for seamless looping (which totally makes sense now).
Cheers for looking into that.