🎞️ 1. How to Create an Auto-Play Slideshow

Here’s how to create an autoplay slideshow with a duration based on the update interval of Glide (5-10 seconds), without using HTML or CSS:


  1. 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.
  2. Total Image: Use the “Roll Up” column to get the total number of images, which is useful for resetting the slideshow to the beginning.
  3. 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;

  1. Query, to filter the Index of the image to be displayed by the row number.

  1. Lookup column, to display the image to be shown by the Image component.

/*Fade-in code*/
.slideShow:has(img) > div {
  animation: fade 2.5s alternate;
@keyframes fade {
  0% {
    opacity: 0;
  100% {
    opacity: 1;


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; 

See also:

:film_strip:  2. Transforming Card Collection into a Slide-In Carousel with CSS
:arrows_counterclockwise:  3. Transforming a Card Collection into a 3D Continuous Carousel with CSS


nice. Can we also add actions to the images?

1 Like

Great question. Yes, you can use a collection and filter “No is Index to show” Action following the collection method.

1 Like

great!! I’ll try it. :+1:

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

1 Like

Show if you succeed, okay… I haven’t tried it yet, but I’m confident it can be done.

1 Like

lol ok. I will!

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.

1 Like


Well I was stuck from the start because i never used Row IDs or Index column before. So I’m searching for reading material :laughing:

The row IDs were simple but the index isn’t as intuitive.

And then: Use the math column to add: noIndex + 1

1 Like




I was also trying to figure out the rationale for the Row IDs from the contact list…

1 Like

Did you also have an Index to Show column in your contacts table? @Himaladin

“Index to show” is the JavaScript column you created.

Yes. I was watching your source there and saw “Contacts”… Is it that your current image table is called “Contacts”?

Yes, I used a contact table to test it. Because it has an image there. You adjust it to the table where your image is located.

oohhh ok! Some of the pieces are coming together now.

I originally thought you were pulling images from another table called “Contacts”

1 Like

Strangely enough, I got it to work automatically with the standard collection but when I used the custom collection, it became a manual slideshow…

I’ll double-check to find my error…

It looks like you are fetching images from an array column, not a basic column.

hmm… I don’t think I used an array.


you’re right… my Image to Appear column is an array for some reason, lol.