# đď¸ 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:** 3
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 4:37am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/41 "2024-05-12T04:37:53Z")
> [@Himaladin](#):
>
> You can use it.
when I use it, I only see this. And with the transparent background, I canât tell if the image is the full width.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 4:40am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/42 "2024-05-12T04:40:19Z")
Make sure the preview is turned on. It seems that none of the code is working for you.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 4:44am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/43 "2024-05-12T04:44:46Z")
I turned it on but nothing changed.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 4:47am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/44 "2024-05-12T04:47:39Z")
Can you provide a screenshot of what youâve configured, including the Custom CSS?
Or change with this code:
```auto
/*Hide Navbar*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) [data-testid="wire-container"] {
background-color: transparent !important;
padding-top: 0;
}
/*Container padding*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) .slide-Show > div > div > div > div {
padding:0 !important;
width: 100%;
//margin-top: calc(30px - var(--safe-area-inset-top));
}
/*Hide Container background*/
.mobile-layer #main-root:has(.slide-Show) .slide-Show {
background: transparent !important;
}
.mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"]{
height:300px;
}
.mobile-layer #main-root:has(.slide-Show) [data-testid="wire-component-stack-slide-Show"] > div > div > div, .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] > div, .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] img, #page-root:has(.slide-Show) [data-testid="cc-card"]{
border-radius:0;
padding:0px;
}
```
Note: This code update allows for a variety of styles that you can apply.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 4:56am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/45 "2024-05-12T04:56:47Z")
I replaced it with the new code but still no change.
The css was clipped from your posts.
Question⌠is the div brackets ok in the code? Itâs pointing the opposite direction from other codes that Iâve used.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 5:00am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/46 "2024-05-12T05:00:42Z")
You are setting the background of the container instead your collection component. đ
Leave the container in the ânoneâ state or switch it to âaccent.â
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 5:04am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/47 "2024-05-12T05:04:22Z")
still no luck. I will try changing the â\> divâ to â\â
⌠made no difference either. lol
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 5:08am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/48 "2024-05-12T05:08:41Z")
There seems to be a bit of an issue. Iâm concerned there might be conflicting CSS. Could you try clearing and copying your CSS to another location to test it?
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 5:10am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/49 "2024-05-12T05:10:11Z")
weâre thinking alike now. I just tried that too. NothingâŚ
but I will try adding your first code again, with the CSS section clear.
⌠that didnât work either. Could it be that your image just isnât compatible with my location? Do you have another image we can try?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 5:15am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/50 "2024-05-12T05:15:03Z")
The CSS code I provided should work, at least there should be some changes. If in your CSS you use â/\*â and do not close it with â\*/â then all the code below it will not work.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 5:22am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/51 "2024-05-12T05:22:15Z")
Iâm just using the same code that you supplied so Iâm mystified.
With a different image, I get this:
Can you test the code with this to see if it works for you?
```auto
```
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 5:27am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/52 "2024-05-12T05:27:06Z")
> [@Sekayi\_Liburd](#):
>
> 
It seems the issue is here. Why are you still using the title component?
Using collection and richtext should be enough:
> [@Himaladin](#):
>
> 
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 5:30am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/53 "2024-05-12T05:30:59Z")
I just kept it there for reference. When I removed the other components, it didnât solve the problem. But I can remove it again if you think I should.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 5:34am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/54 "2024-05-12T05:34:48Z")
My code is designed for the collection, not for the title component. Perhaps you remove it first, then after testing, you can put it back (turn off its visibility).
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 5:42am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/55 "2024-05-12T05:42:37Z")
ok. So it needs to be a collection? maybe our wires got a little crossed then.
Tell me which components you prepared the code for and Iâll set it up. Just those in the image there?
I thought we were doing everything through the rich text, thatâs why i didnât include a collection component.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 5:46am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/56 "2024-05-12T05:46:51Z")
This:
> [@Himaladin](#):
>
> 
As you know, only collections and custom collections allow for clicking. However, the image component, if not inside a custom collection, will only navigate to the first row when clicked.
Richtext is just to hold your logo.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 5:51am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/57 "2024-05-12T05:51:17Z")
oohhh. I understand your thought process now. Ok
I prepared it like in your diagram and copied the code and class but the main image still doesnât reach to the edge. Itâs ok though. Eventually, it will happen. đ¤
For now, Iâll work with it as is.
- Itâs still really nice and itâs clickable so massive improvement!
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 6:02am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/58 "2024-05-12T06:02:42Z")
Basic explanation:
1. If you are using a collection, this is a list-type component. Therefore, you just need to filter to display the corresponding row number based on the âIndex to showâ above.
2. If you are only using the image component, which is basically a single (non-list) component, then all images need to be collected in an array to be displayed according to the index from the âIndex to showâ. There is no filter option here. And only one action, which usually refers to the first row from clicking on any image that appears. The same goes for images within the title component options.
Show me which components you are using in the left panel. Why do I still see the search element above it?
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 6:06am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/59 "2024-05-12T06:06:42Z")
lol, I didnât customize the settings on the right side. I only rebuilt the left side with the components you listed and did the coding part.
This is the left:
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 6:09am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/60 "2024-05-12T06:09:24Z")
Has it worked? After you turned off the search option.
[Previous page](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271.md?page=2)
[Next page](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271.md?page=4)