In Editor X, has anyone found a workaround to add custom navigation buttons ( using Velo) to repeaters or layouters when they are in « Slider mode » ?
It seems impossible to target each slide with the « changeSlide » event in Editor X.
2 Likes
Hi @studio-shapeshift ,
I’m Jonathan from the Editor X Team.
I’ve created a code snippet that converts your Repeater into a slider, but you’ll also have to adjust your Repeater accordingly.
First, create a container that will act as a “mask” for your Repeater and set it’s width to 65% (or adjust the code to match).
Then attach the Repeater to the container, and dock it to the left and top with 0 margins.
Change the Repeater’s width to its number of items * 100 in percentage (4 items = 400% width), and change its layout like in the picture.
Now each item should fit the full width of the masking container.
Once you’re done designing the items, change the parent container’s “Overflow Content” to “Hide”.
Add 2 button, one for sliding left and one to the right.
Paste this code and change the ID’s to match, and “counter” to the number of items.
import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';
$w.onReady(function () {
let repeater = $w('#repeater1');
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();
}
});
}
});
Also for future reference, you should use the Velo Forum to get pro advice and more answers regarding code.
Hopefully this helps, let me know if you need more guidance.
@jonathant Thanks a lot for your tuto !! I was desesperate and blocked in my project. Below is your code that I have edited accordingly to your 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 : I’ll also seek some help on the Velo forum. Thanks a lot!
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();
}
});
}
});
Hi @studio-shapeshift , it doesn’t seem to be working correctly because of the structure of your Layouter items.
I’ve made an x-ray example so you could see how the overflow works.
https://jonathant99.editorx.io/mysite-37
I’ve used a Repeater.
The container that my Repeater is sitting in, has pink border.
The Repeater itself is 400% width (depends on how many items you have inside), and each Repeater Item is 100% width so it fills the whole parent container.
Also your Layouter layout should be “Columns”.
@jonathant I am a little late to the party, but I just found your solution for a slideshow here. It’s great!! Thank you for posting it!
I am just running into an issue with looping around from last-slide to first-slide and first-slide to last-slide.
In your x-ray example I am seeing a very smooth transition from last-slide to first-slide, but from the first-slide to the last-slide there is a weird thing that it first flips through all the slides in between.
In my code I am seeing this phenomenon of flipping through all the slides when looping around on both ends: first-to-last and last-to-first. Could you please indicate how you did the smooth transition from last-to-first?
In your example code for the function ‘slideRight’ there doesn’t seem to be a difference for when counter >3 or not.
Thank you for your help.
Hey @ajacksonus , I’m glad that this helped you!
To seamlessly from last slide to first, you should add an animation with 0 duration to the “slideRight” function. Here’s an example, you can see that I’ve added “.onComplete” after the first animation.
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();
}
});
}
I decided not to use it in “slideLeft” function, but you can do it by duplicating your last item and placing it before the first slide (same way I did with the first slide appearing at the end as well)
@jonathant is that code definitely the same used in your demo? I can’t get it to slide by itself or loop round when it gets to the end.
Spent hours on it.
Many thanks
Hey @mitchkvernon , to make it slide automatically I’ve just added a timer that triggers the function every 3 seconds (3000 ms).
function autoSlide() {
slideRight()
setTimeout(autoSlide, 3000);
}
autoSlide()
You can paste this above the “slideRight” function.
@jonathant Thanks for your response! Works like a charm.
Any tips on how to get it to rotate to the start correctly at the end of the frames please? I believe someone above was having the same issue.
Here’s my example [https://www.neondaddy.co.uk/blank](https://www.neondaddy.co.uk/blank
Thank)
Thank you for the help
@Jonathan Tsodikovitch -Thank you Jonathan for the great code. it works just fine.
Could you tell me if its possible to start the slider on the center slide, so that initially i can trigger it to the left and the right?
and i was also wondering how you get it to rotate from first to last and from last to first?
thank you very much for your help
@mitchkvernon Yes I’ve shared the code for it 
Just click on “Load more replies” under the last comment above.
Hey @janeisenring , I’m happy this helped you!
It’s currently a little tricky to make the slider start from the center, because you’ll need to have uneven number of items.
If you have an example of the result you’re looking for maybe you can share it with me and I’ll try to help you out.
Regarding the rotation from last to first, I’ve answered it above with some code.
Click on “Load more replies” on one of the comments above.
… We’re in May & I was so busy that I have not seen all these answers.
Thanks yall for having followed this thread & thank you @jonathant for your help and your responsiveness : I wake up few months later with the whole solution in a plate. 
But I"m still waiting for a native slideshow for the X…
@jonathant perfect thanks! Apologies about my blindness
@mitchkvernon Nice website but you should set the section of your slideshow as “hidden” 
. Keep up the good work
@studio-shapeshift ahh thank you but that’s only a test page I use to play around with. It should be set to hidden on my home page(I hope ) neondaddy.co.uk
Hi @jonathant , it seems that I am still missing something for sure : it still doesn’t work on my end
Please, on your test ( https://jonathant99.editorx.io/mysite-37 ), can you set the “start now” button as it is done on the Hover Interactions site ( https://jonathant99.editorx.io/chamber ), I mean, for enabling the site’s duplication ?
Thanks a lot in advance.
Hey @studio-shapeshift could you clarify what exactly do you mean?
You can copy any button from the Hover Interactions website, just make sure you copying the whole container with the button.
@jonathant I am still trying to achieve the Velo slideshow.
I have checked everything several times but I don’t understand why the first item of my repeater works (even if it is lightly cropped on the right ) but the two other are not properly displayed : https://www.loom.com/share/07c4831ed65b4521926ef30c463e7806 for this prototype : https://studioshapeshift.editorx.io/edenrenov
Thanks a lot in advance, for your time and your help.
@studio-shapeshift Oh I see now, you have a vertical section 
We need to take that into consideration as well.
So replace this(in both functions):
let documentWidth = windowSizeInfo.document.width;
With this:
let documentWidth = windowSizeInfo.document.width - (windowSizeInfo.document.width * 0.047);