Community X.

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

Dec 23, 2020
Edited: Dec 23, 2020

Slider with horizontal arrows/anchor

Hi Community,

I'm creating an horizontal timeline using horizontal layouter/slider (cf video hereafter). The result is good but it's difficult to navigate horizontally on desktop pc, and using the horizontal scrollbar is not user friendly. I'm trying to find a solution or a trick to simplify the scrolling (perhaps arrows to navigate between items, or a kind of horizontal anchor). I saw a discussion about Timeline API but I'm not sure it works horizontally. If you have any idea, it would be helpful and appreciated 😊




1 answer1 reply
5
Dec 24, 2020

Hi, loic.darolles,


currently, there is no solution for horizontal navigation on desktop pc with a layouter or a slider.

For your usage, I can recommend you using a repeater with an absolute amount of items:

In this solution, it is necessary for you to declare the number of items to the total of all the items in the repeater and to set the repeater margin with a negative value, also The section that holds the repeater has an overflow hidden.

The usage of Timeline API, in this case, is possible. Just notice that if you use forEachItem all the animations work the same way and if you use forItems with specific items each one of them will animate differently.


I’ve added an example usage for you:


Code



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

$w.onReady(function () {

 const repeater = $w('#repeater');
    $w('#dataset').onReady(async function () {
 
        repeater.forEachItem(($item, itemData, index) => {
 let item = $item('#item');
 let mainText = $item('#mainText');
 let playOnce = true;

 let hoverTextAnimation = wixAnimations.timeline().add(mainText, { y: -20, x: 80, duration: 1000, opacity: 1, easing: "easeInSine" }, 0);
 
 
            item.onMouseIn(() => {
                console.log(item.id)
 if (playOnce) {
                    animationComplete = false;
                    hoverTextAnimation.play();
                    playOnce = false;
                }
            });

 let counter = 0;
 let animationComplete = true;
 let repeaterMove = ($w('#repeater').data.length) / 3;
            console.log(repeaterMove);
            $w('#next').onClick(() => {

 if (counter < repeaterMove - 1 && animationComplete) {
                    animationComplete = false;
                    counter++;
                    wixWindow.getBoundingRect()
                        .then((windowSizeInfo) => {
 let windowWidth = windowSizeInfo.window.width; // 
                            wixAnimations.timeline().add($w('#repeater'), { x: `-=${windowWidth}`, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => {
                                animationComplete = true;
                            });
                        });
                }

            })

            $w('#prev').onClick(() => {

 if (counter > 0 && animationComplete) {
                    animationComplete = false;
                    counter--;
                    wixWindow.getBoundingRect()
                        .then((windowSizeInfo) => {
 let windowWidth = windowSizeInfo.window.width; // 
                            wixAnimations.timeline().add($w('#repeater'), { x: `+=${windowWidth}`, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => {
                                animationComplete = true;
                            });
                        });
                }

            })

 var initWidth;

            wixWindow.getBoundingRect()
                .then((windowSizeInfo) => {
                    initWidth = windowSizeInfo.window.width; // 
                    console.log(initWidth)
                    screenChange();
                })

 function screenChange() {
                wixWindow.getBoundingRect()
                    .then((windowSizeInfo) => {
 let rWidth = windowSizeInfo.window.width; //
 if (rWidth !== initWidth) {
                            console.log('inside if')
 let repeaterPosition = counter * rWidth;
                            console.log(repeaterPosition);
                            wixAnimations.timeline().add($w('#repeater'), { x: -repeaterPosition, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => {
                                animationComplete = true;
                            });
                            initWidth = rWidth;
                        }
                    })
                setTimeout(() => {
                    screenChange();
                }, 50)
            }

        })
    })
})

Demo: https://edensh0.editorx.io/layoutergallerypc


Also, here you can get some more information on the forEachItem and forItems repeater loops:


forEachItem link

forItems link

Jan 04Edited: Jan 04

I've been looking for a solution to this matter for ages now. Thank you @Eden for taking your time to write a detailed answer.

Editor X

Design your boldest creations.