Your image table must have a number column. You can use the “Find Element Index” column to generate row numbers based on RowId. See: @Darren_Murphy’s method.
Total Image: Use the “Roll Up” column to get the total number of images, which is useful for resetting the slideshow to the beginning.
JavaScript column, to calculate the current number based on the current time from Glide.
let limit = p2; // Counter limit
let currentCounter = Math.floor((new Date().getTime() / 10000) % limit) + 1;
return currentCounter;
After receiving feedback from @Jeff_Hager in the CSS for Responsive Header thread, here is the update to the JavaScript column to manipulate the duration to move 2 times faster. You need to add one more javascript column to trigger javascript now it works faster:
function resolveAfternSeconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve(new Date().getTime());
}, 4500);
});
}
return await resolveAfternSeconds();
And change the above JavaScript to:
let limit = p1;
let currentCounter = Math.floor((new Date().getTime() / 5000) % limit) + 1;
return currentCounter;
I used gifs to create the illusion of a slide show but it’s a bit tedious and of course, you can’t navigate by clicking on the gif images since it’s technically one image, lol
Yes @Sekayi_Liburd, I’ve started it. You should use Custom Collection + Image. The result is very satisfying, each image can be clicked. Thank you for the additional idea.
2. Transforming Card Collection into a Slide-In Carousel with CSS
3. Transforming a Card Collection into a 3D Continuous Carousel with CSS
