top of page
Forum Posts
Studio Shapeshift
Jan 21, 2021
In Coding with Velo
Hi everyone, I am a bit desperate and blocked in my project. Below is a code that the Editor X's Team has shared to help me. I have edited it accordingly to his indications, and here's the live result (mobile breakpoints not optimized again) : https://www.stage.studioshapeshift.com/who-we-are
As you can see, the result is very buggy. Could you tell me what I have missed, please ?
Thanks in advance for your help and return on this try. import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';
$w.onReady(function () {
let repeater = $w('#aboutslider');
let leftSliderBtn = $w('#back');
let rightSliderBtn = $w('#next');
let counter = 3;
rightSliderBtn.onClick(() => {
slideRight();
})
leftSliderBtn.onClick(() => {
slideLeft();
})
function slideRight() {
counter++;
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let documentWidth = windowSizeInfo.document.width;
let moveDistance = documentWidth * 0.68; // 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 * 0.68; // Container width
if (counter < 0) {
wixAnimations.timeline().add(repeater, { x: (repeater.data.length - 1) * -moveDistance, duration: 300, easing: 'easeOutSine' }).play();
counter = 0;
} else {
wixAnimations.timeline().add(repeater, { x: counter * -moveDistance, duration: 300, easing: 'easeOutSine' }).play();
}
});
}
});
0
0
190
Studio Shapeshift
More actions
bottom of page