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 :)
Any help please?