Help with code for custom slider in editor x

Ask the community
,
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);
 } ); 
 } 
});