# đď¸ 1. How to Create an Auto-Play Slideshow
**URL:** https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271
**Category:** Community Resources
**Tags:** custom-css, tutorial, custom-code
**Created:** [May 11, 2024, 7:35am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271 "2024-05-11T07:35:37Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 7:35am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/1 "2024-05-11T07:35:38Z")
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](https://community.glideapps.com/t/how-do-i-create-an-auto-incrementing-row-number-with-glide-tables/39572)â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.
```auto
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.
```auto
/*Fade-in code*/
.slideShow:has(img) > div {
animation: fade 2.5s alternate;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```
## Update
* * *
After receiving feedback from @Jeff_Hager in the [CSS for Responsive Header](https://community.glideapps.com/t/css-for-responsive-header/73303/97) 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:
[ ](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c9ca831cce21db9016bc96a63c64163c0eb2de34.png)
```auto
function resolveAfternSeconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve(new Date().getTime());
}, 4500);
});
}
return await resolveAfternSeconds();
```
[ ](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/2/32e89845fe4cc34c9b2aee72266e5cfb56ef4850.png)
And change the above JavaScript to:
```auto
let limit = p1;
let currentCounter = Math.floor((new Date().getTime() / 5000) % limit) + 1;
return currentCounter;
```
See also:
> **[đ 2. Transforming Card Collection into a Slide-In Carousel with CSS](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400)**
> **[đ 3. Transforming a Card Collection into a 3D Continuous Carousel with CSS](https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558)**
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 7:47am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/2 "2024-05-11T07:47:44Z")
nice. Can we also add actions to the images?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 7:51am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/3 "2024-05-11T07:51:39Z")
Great question. Yes, you can use a collection and filter âNo is Index to showâ Action following the collection method.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 7:58am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/4 "2024-05-11T07:58:27Z")
great!! Iâll try it. đ
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
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 8:00am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/5 "2024-05-11T08:00:27Z")
Show if you succeed, okay⌠I havenât tried it yet, but Iâm confident it can be done.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 8:03am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/6 "2024-05-11T08:03:08Z")
lol ok. I will!
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 8:13am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/7 "2024-05-11T08:13:24Z")
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.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 8:33am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/8 "2024-05-11T08:33:28Z")
lovely!!!
Well I was stuck from the start because i never used Row IDs or Index column before. So Iâm searching for reading material đ
The row IDs were simple but the index isnât as intuitive.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 8:38am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/9 "2024-05-11T08:38:22Z")
And then: Use the math column to add: noIndex + 1
---
### Author:  [@nathanaelb](https://community.glideapps.com/u/nathanaelb)
#### Post date: [May 11, 2024, 8:49am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/10 "2024-05-11T08:49:45Z")
@Sekayi_Liburd
> [@How do I create an auto-incrementing row number with Glide Tables?](https://community.glideapps.com/t/how-do-i-create-an-auto-incrementing-row-number-with-glide-tables/39572):
>
> This is a question that comes up a lot, so creating this topic to use as a reference. Typically, there are two distinct use cases when it comes to auto-incrementing row numbers. Use Case 1: â We need to generate a Part Number, or an Order Number, or an Employee ID. Once the number is generated, it should never change, even if rows are deleted. â The general approach for this use case is to maintain a static counter, use it to craft a suitably formatted ID, and increment it by one every timeâŚ
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 8:50am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/11 "2024-05-11T08:50:29Z")
thanks!
I was also trying to figure out the rationale for the Row IDs from the contact listâŚ
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 9:07am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/12 "2024-05-11T09:07:09Z")
> [@Himaladin](#):
>
> 1. Query, to filter the Index of the image to be displayed by the row number.
>
> 
Did you also have an Index to Show column in your contacts table? @Himaladin
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 9:11am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/13 "2024-05-11T09:11:24Z")
âIndex to showâ is the JavaScript column you created.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 9:13am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/14 "2024-05-11T09:13:05Z")
Yes. I was watching your source there and saw âContactsâ⌠Is it that your current image table is called âContactsâ?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 9:14am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/15 "2024-05-11T09:14:52Z")
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.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 9:15am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/16 "2024-05-11T09:15:31Z")
oohhh ok! Some of the pieces are coming together now.
I originally thought you were pulling images from another table called âContactsâ
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 9:26am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/17 "2024-05-11T09:26:57Z")
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âŚ
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 9:29am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/18 "2024-05-11T09:29:07Z")
It looks like you are fetching images from an array column, not a basic column.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 9:31am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/19 "2024-05-11T09:31:24Z")
hmm⌠I donât think I used an array.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 9:34am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/20 "2024-05-11T09:34:11Z")
youâre right⌠my Image to Appear column is an array for some reason, lol.
[Next page](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271.md?page=2)