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 Like
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
I’ve been looking for a solution to this matter for ages now. Thank you @edensh for taking your time to write a detailed answer.
Hello @edensh ,
I was wondering if this is possible to create a sliding repeater that doesn’t overflow the page, because I’m trying to create a slider that looks like this:
Let me know if this is possible
Ugh…this is such an annoying issue. It’s like all the functionality is there almost…just need to be able to apply anchors or buttons that take you to the next item in the layouter/repeater.
Really need this function added! Been waiting for it/slideshows for FOREVER I feel like.
Seems like a somewhat easy addition to implement since like 90% of the functionality is already there? (maybe it’s more complicated than I realize though)
This is a good solution easy to implement and updated.
Adjust measurements to the ones you are using of the boxes, padding, spacing.. etc.
In a nutshell you control the position of the first element of the repeater.
PS. Do not forget to place a container on top of the repeater to cancel the scrolling over the repeater, so you do not mess the logic.
import { timeline } from ‘wix-animations-frontend’;
let currentOffset = 0;
const boxWidth = 300;
const gapWidth = 10;
const totalWidthPerItem = boxWidth + gapWidth; // 320px
const totalItems = 20; //CMS items
const visibleItems = 3.5; //
const maxOffset = (totalItems - visibleItems) * totalWidthPerItem; // 5440px
$w(“#rightArrow”).onClick(() => {
if (Math.abs(currentOffset) < maxOffset) {
currentOffset -= totalWidthPerItem;
$w("#repeater1").forEachItem(($item) => {
timeline()
.add($item("#box45"), {
duration: 500,
x: currentOffset,
easing: "easeOutQuad"
})
.play();
});
}
});
$w(“#leftArrow”).onClick(() => {
if (currentOffset < 0) {
currentOffset += totalWidthPerItem;
$w("#repeater1").forEachItem(($item) => {
timeline()
.add($item("#box45"), {
duration: 500,
x: currentOffset,
easing: "easeOutQuad"
})
.play();
});
}
});
check my last answer