# 🎞️ 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:** 4
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 6:10am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/61 "2024-05-12T06:10:58Z")
no, it’s the same as before ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 6:11am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/62 "2024-05-12T06:11:20Z")
Is your container setting 1:1? The Glide divider line is very subtle, often not readable. ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 6:14am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/63 "2024-05-12T06:14:11Z")
It’s set on “Full” but i also tried 1:1 just in case ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 6:19am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/64 "2024-05-12T06:19:34Z")
You may look closely at my settings: ![Screenshot 2024-05-12 at 13.15.38](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/c/0c62ae9f7c3631203c57fcfde25cbcc748fa98b7.jpeg) ![Screenshot 2024-05-12 at 13.16.14](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c486863c31661eddad202c1f35ee1bc8c59c675.jpeg) ![Screenshot 2024-05-12 at 13.16.32](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/43a0e0284a8c34a6f2de91e0fa2d4c0d05f3a26c.jpeg) ![Screenshot 2024-05-12 at 13.16.56](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/8/28e7d8a5524945fe5e4ad1c5158ecfff7b02b52b.jpeg) ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 6:40am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/65 "2024-05-12T06:40:57Z")
I checked it and replicated everything to make sure our settings are identical. Now I believe that it’s just the difference in our phones… So my image just won’t reach the edge with these settings. I took before and after pictures to prove that the code is working. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/616ea915301c9e1d352b23475af2edcf9fca7c04.jpeg) ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 6:52am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/66 "2024-05-12T06:52:15Z")
I’ll double-check. Trying to publish it. I’ll let you know later. ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 6:54am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/67 "2024-05-12T06:54:49Z")
ok ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 8:20am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/68 "2024-05-12T08:20:02Z")
@Sekayi_Liburd, This is a code improvement that can be responsive for two views: mobile and desktop (you can temporarily disable the use of device info). Please try again. If it still doesn’t work, try taking a screenshot of the left and right panel configurations in full so I can see them clearly. Note: USE THE PREVIOUS CODE 👆 ~~/\*Hide Navbar\*/ .phone #page-root:has(.slide-Show) [data-testid="wire-container"] { background-color: transparent !important; padding-top: 0; } /\*Desktop-Repairing\*/ [data-testid="wire-component-stack-slide-Show"] \> div \> div \> div \> div { margin-top: 54px; } /\*Container padding\*/ .mobile-layer #main-root:has(.slide-Show) .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="card-image"] img, #page-root:has(.slide-Show) [data-testid="cc-card"]{ border-radius:0; }~~ View on iPhone ![IMG_2129.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2ecb9e36ab0b47728fe473aae5e867106da94fdd.jpeg) Desktop view ![Screenshot 2024-05-12 at 15.35.13](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3db90aea51a62ddc82992c5865932d8c48b71633.jpeg) ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 8:44am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/69 "2024-05-12T08:44:21Z")
It still looks like there’s padding. Just a warning… my left panel is crazzzyyy because this is my test app that I’m fiddling in. So there are LOTS of components to wade thru 😊 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6c9d5e098a78b826d417f1a4d57f8b811d70eb20.jpeg) The container near the bottom is the one I’m currently looking at. ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 8:48am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/70 "2024-05-12T08:48:10Z")
No, the container containing the collection and richtext is the header, you should place it first at the very top. ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 8:57am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/71 "2024-05-12T08:57:10Z")
oh ok. I put it at the very top but it didn’t change the width. here are the images on the right: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f172a4cf1e9083517e26b3f15b9a1d4402158d6f.jpeg) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/8/d89e63ffe1c1c9619f45e49c20182bf64e32e979.jpeg) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d9014cfbd755068279c1e8c44622de5f340fa267.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/d/0d7117a0e0ee7d7efba964dbd7354a0fb659fc4f.jpeg) ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 9:01am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/72 "2024-05-12T09:01:16Z")
Try changing the container background to accent. ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 9:06am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/73 "2024-05-12T09:06:10Z")
that did the trick! ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/7/a7dd6f11f61323e6bb109429ae413ead66d61a49.jpeg) So I guess it was a combination of placing it at the top and selecting accent Out of curiousity, I’m gonna try the other codes you provided before as well. ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 9:08am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/74 "2024-05-12T09:08:23Z")
Each different setting results in a different selector. Will you keep this condition, or will you revert to “none”? ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 9:14am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/75 "2024-05-12T09:14:16Z")
hmm… I prefer the accent than none. But I prefer a background image than the accent. So I’ll have to play around with it to see what I land on. (All the codes work now btw 🥲) Thanks for your saintly patience. ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 9:20am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/76 "2024-05-12T09:20:06Z")
I have a question for you. Can I create a sequence of actions that also sync with the Index to Show column? A.k.a: When Index to Show is 1 → action 1 When Index to Show is 2 → action 2 etc. I feel like we should be able to get the images and actions to sync up even if we don’t use a collection but I don’t really know how to build action sequences yet. If we can use the image component or just rich text, we’ll be able to create/customize a design that we love. ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 9:25am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/77 "2024-05-12T09:25:41Z")
You can assemble that condition in a “new action” for the collection regarding the current row/image displayed. However, if you’re using the image or richtext component, they are static and I don’t think it’s possible. ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 9:33am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/78 "2024-05-12T09:33:55Z")
Can you explain what “static” means in this case? If we capture the moment the user taps on the image by identifying the “Index to Show” when the action is triggered, wouldn’t it resemble something live? (Similar to how our custom search works) ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [May 12, 2024, 9:41am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/79 "2024-05-12T09:41:45Z")
The relationship of these components with the table is only through one data column from the backend table. Although it can contain an array, but it does not have a direct relationship. You won’t find a relation from the option of this object. ---
### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd) #### Post date: [May 12, 2024, 9:44am UTC](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271/80 "2024-05-12T09:44:46Z")
hmm… ok. That might be why I’ve been going in circles trying to set up the actions. 😅 [Previous page](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271.md?page=3) [Next page](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271.md?page=5)