Help with code for custom slider in editor x

Ask the community
,
1

Hello all, I’ve got custom code to add a slider from a repeater. I can’t get it to work correctly, when it gets to the end on the right it doesn’t loop. It also doesn’t slide by itself which I’m sure it should be doing. Any help where I’ve gone wrong?

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

$w.onReady(function () {

 let repeater = $w('#slide');
 let leftSliderBtn = $w('#left');
 let rightSliderBtn = $w('#right');
 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 > 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 * 1; // Container width

 if (counter < 3) {
                    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();
                }
            });
    }
});

Many thanks :slight_smile:

1 Like
2

Any help please?

3

Greetings! I have to do the same thing, similar to what the ProGallery is doing but with the customizable Items that a Repeater control offers.

Here is the code I have so far, it doesn’t use buttons. Unfortunately it’ll be problematic to have both as this code basically builds an animation timeline based off the dynamic pieces of a repeater and then just controls the replay of that timeline.

// 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 () {
 var repeater = $w('#repeater2');
 var i = 1;
 var timeline = wixAnimations.timeline();

 // Begin the auto slide show
    setTimeout(function(){ BeginSlider(i); }, 4000);

function BeginSlider(e) {
 // Get the form factor so we can control how far we slide
 let formFactor = wixWindow.formFactor;

        console.log("Animating for: " + formFactor);

 // Set up the Desktop config
 if (formFactor == "Desktop") { 
 // Build the animation timeline
            $w("#repeater2").forEachItem( ($item, itemData, index) => {
                timeline.add($item("#box106"), { x: -400 * e, duration: 500,  easing: 'easeOutSine' }, "+=500").play()

 // Add code to open external links in new tab
 if (itemData.buttonClick.includes("https")) { 
                    $item("#button10").target = "_blank"; 
 }
 } ) ;
 }
 else if (formFactor == "Tablet") {
 // Build the animation timeline
            $w("#repeater2").forEachItem( ($item, itemData, index) => {
                timeline.add($item("#box106"), { x: -350 * e, duration: 500,  easing: 'easeOutSine' }, "+=500").play()

 // Add code to open external links in new tab
 if (itemData.buttonClick.includes("https")) { 
                    $item("#button10").target = "_blank"; 
 }
 } ) ;
 }
 else if (formFactor == "Mobile") {
 // Build the animation timeline
            $w("#repeater2").forEachItem( ($item, itemData, index) => {
                timeline.add($item("#box106"), { x: -300 * e, duration: 500,  easing: 'easeOutSine' }, "+=500").play()

 // Add code to open external links in new tab
 if (itemData.buttonClick.includes("https")) { 
                    $item("#button10").target = "_blank"; 
 }
 } ) ;
 } 
 // Handle how far each slide must move
 if (i === repeater.data.length) {
            i = 1;
            $w("#repeater2").forItems( ["item1"], ($item, itemData, index) => {
                timeline.add($item("#box106"), { x: 0, duration: 500,  easing: 'easeOutSine' }, "+=500").play()
 } ) ;
            setTimeout(function(){ ResetSlider(); }, 4000);
 }
 else { 
               i++; 
            setTimeout(function(){ BeginSlider(i); }, 4000);
 
 } 
 }
 
 function ResetSlider() { 

 // Set up the delay to see the 1st slide without it animating
        timeline.onStart( () => {
 // Pause the timeline 
            timeline.pause();

 // Restart it in 5s
            setTimeout(function(){ timeline.play() }, 4000);
 } ); 

 // Replay the built animation
        timeline.replay();

 // Set up recursion
        timeline.onComplete( () => {
            setTimeout(function(){ ResetSlider(); }, 4000);
 } ); 
 } 
});