Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Jan 19

Add navigation buttons to repeater or layouter (slider mode)

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.

1 answer2 replies
1
Best Answer
Jan 20

Hi @Vitika Green ,

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.

Jan 21Edited: Jan 21

@Jonathan Tsodikovitch 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 @Vitika Green, 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".


Editor X

Design your boldest creations.