# šļø 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:** 2
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 9:35am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/21 "2024-05-11T09:35:23Z")
Sorry, I forgot to inform you, if you use a custom collection, the āimage appearā column is no longer needed. This is because of the nature of the collection component, which is a list.
Also, you might not be fetching images based on the query result, which results in an array.
> [@Himaladin](#):
>
> 
>
> Screenshot 2024-05-11 at 14.43.19702Ć540 19.8 KB
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 9:37am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/22 "2024-05-11T09:37:53Z")
ok. It works perfectly now! š
ā¦ now to test the actions.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 9:42am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/23 "2024-05-11T09:42:11Z")
This is a lovely workflow @Himaladin š š
The top one is the custom collection and the bottom is the standard collection using cards. Both work well.
EDIT\*\*\* @Himaladin
ok, thanks. I fixed the query column so itās no longer an array. š
I have a couple aesthetic questions.
Is there a way to make the custom collection show an image in the background?
Also, is there a way to play with or remove the padding to create a similar effect to my gifs in a normal container? (see below - upper image is our automatic slideshow and the bottom image is the gif)
On mobile, I put my gif in a title component to get it to look like thatā¦ and on larger screens it shows a background image to fill the space like this:
EDIT\*\*\* @Himaladin
I think I got itā¦ Instead of the custom container, I did another query and lookup column on my home page and pointed them to my Images Table. With that, I could use the original container with same title component and swap the gif with the new images instead. So that took care of the background image and fit problem -the gif can be perfectly replaced!
The only issue now is that I canāt add actions to title components, lolā¦ So i may have to try to use a regular image component with some CSS to mimic the fit of the title componentā¦ š
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 11, 2024, 10:46pm UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/24 "2024-05-11T22:46:10Z")
@Sekayi_Liburd, Do you mean you want to remove the padding for the mobile view (full width)?
> [@Sekayi\_Liburd](#):
>
> Is there a way to make the custom collection show an image in the background?
Could you be using a 1:1 container + card collection and your logo here?
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 11, 2024, 11:45pm UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/25 "2024-05-11T23:45:50Z")
Yes, I meant appearing full width on the mobile view like in my image.
> [@Himaladin](#):
>
> Could you be using a 1:1 container + card collection and your logo here?
>
> 
Yes, this can work. How can you get your logo on the card? CSS?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 1:45am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/26 "2024-05-12T01:45:11Z")
> [@Sekayi\_Liburd](#):
>
> Yes, I meant appearing full width on the mobile view like in my image.
Can you provide a screenshot of the component you are using or need to widen?
For the logo, you can use an image component, but it would be more flexible with HTML.
```auto
```
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 1:49am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/27 "2024-05-12T01:49:25Z")
the settings are pretty limited with this component.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 1:53am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/28 "2024-05-12T01:53:50Z")
No, I mean, do you still want to use a clickable slideshow, which wonāt be achievable if using the title component.
Show me the layout youāre expecting.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 1:56am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/29 "2024-05-12T01:56:45Z")
Itās ok. I will use the Image component and adjust the design instead. Thanks.
Itās MUCH better to have it clickable!
@Himaladin
If the image component can reach to these edges, it will be perfect. If not, itās ok. The users will get used to the change in appearance.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 2:02am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/30 "2024-05-12T02:02:28Z")
Your point is that the image reaches the edge and is clickable, right?
Give me a moment. This requires adding CSS.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 2:03am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/31 "2024-05-12T02:03:53Z")
yes please.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 3:17am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/32 "2024-05-12T03:17:36Z")
Before you get too close to the finish lineā¦ can we blend this into what you started working on and create a super workflow?? Looks like it includes some image fit coding too.
> **[CSS Library](https://css-library.glide.page/dl/library/s/8836b3/r/DezBhyGpRrWsrGxntyq-tA)**
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 3:44am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/33 "2024-05-12T03:44:38Z")
Did you create different components for mobile and desktop based on device info?
This part is not yet in the library. It requires handling in the nav-bar and responsiveness across different devices.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 3:50am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/34 "2024-05-12T03:50:55Z")
yes. I used visibility settings according to screen width (less than 500 vs greater than or equal to 500).
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 3:57am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/35 "2024-05-12T03:57:10Z")
If so, I donāt need to set the responsiveness anymore. Please try the following code, and let me know if anything is not right.
Containerās class name: slide-Show
```auto
/*Hide Navbar*/
[data-testid="wire-container"]{
background: transparent !important;
padding:0 !important;
}
/*Container padding*/
.mobile-layer .slide-Show > div > div > div > div {
padding:0 !important;
width: 100%;
margin-top:-15px;
}
/*Can delete*/
.mobile-layer .slide-Show {
background: transparent !important;
padding:0;
}
.mobile-layer .slide-Show [data-testid="card-image"]{
height:300px;
}
.slide-Show [data-testid="card-image"] img{
border-radius:0;
}
```
> [@Himaladin](#):
>
> 
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 4:19am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/36 "2024-05-12T04:19:09Z")
hmmā¦ itās tiny but it could be my fault.
I added your class to the container but I put your html in a template so I could swap in my images. Donāt know if thatās the reason the image is so small.
Some background (in case itās relevant), the editor detects that Iām using a screen width of 1920.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 4:22am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/37 "2024-05-12T04:22:23Z")
Is this a richtext component? If yes, you need to set its height and width.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 4:31am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/38 "2024-05-12T04:31:16Z")
ok. I set the width to 100% and height to auto. Itās better but still not full like yours.
btw, is that you in the picture? š
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 4:33am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/39 "2024-05-12T04:33:40Z")
Is your component placed on the top layer?
> [@Sekayi\_Liburd](#):
>
> btw, is that you in the picture? š
You can use it.
---
### Author:  [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [May 12, 2024, 4:34am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/40 "2024-05-12T04:34:49Z")
ummā¦ how do I know if itās on top?
[Previous page](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271.md?page=1)
[Next page](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271.md?page=3)