top of page
Article #01
Avenir Light is a clean font favored by designers.
Article #02
Avenir Light is a clean font favored by designers.
Category #01
Category #02
Category #03
Category #04
↑
This is section with fix height (500px) and overflow: hidden
↓
←
This is Container with fix width (400px) + Grid with 4 rows (foreach image).
Each row height is 500px & contain one image.
On click we move the entire container upwards 500px (the height of one image).
*See the code below
↓
The code:
import wixAnimations from 'wix-animations';
$w.onReady(function () {
activeSlider();
});
function activeSlider() {
const button = $w('#button1');
const numberOfImages = 4;
const singleImageHeight = 500;
let index = 1;
button.onClick(() => {
if (index !== numberOfImages) {
scroll(singleImageHeight * index);
index++;
} else {
scroll(0);
index = 1;
}
});
}
function scroll(toScroll) {
wixAnimations.timeline()
.add($w('#imagesContainer'), { y: -toScroll, duration: 500 })
.play();
}
bottom of page