# How to make an Image Carousel

**URL:** <https://community.glideapps.com/t/how-to-make-an-image-carousel/1362>\
**Category:** Ask for Help\
**Created:** [October 24, 2019, 12:38pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362 "2019-10-24T12:38:33Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 7, 2021, 10:57pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/21 "2021-02-07T22:57:31Z")

</div>

If you don’t need an array column then that would work. Array columns are only added for sequential numbers.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 7, 2021, 11:05pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/22 "2021-02-07T23:05:16Z")

</div>

You can simulate an array column with a template column and a split text column.

> [@Display images in different columns](https://community.glideapps.com/t/display-images-in-different-columns/21926/8):
>
> You can’t create array columns like that in Glide Tables. You can only do it in google sheets. What I would try is to create a template column to join the two image columns with a comma separating them. Then create a Split Text column that splits on that comma and then creates an array. A multiple relation with a lookup also works as it returns an array, but your data would need to be structured in rows instead of columns. I would try my first suggestion.

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [February 8, 2021, 12:45am UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/23 "2021-02-08T00:45:23Z")

</div>

Yes, I only need them stacked as components, but wanted clear headers for it. Thanks.

---

<div class="post-metadata">

**Author:** ![GAN](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gan/32/25045_2.png) [@GAN](https://community.glideapps.com/u/GAN)\
**Post date:** [April 17, 2021, 3:57am UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/24 "2021-04-17T03:57:32Z")

</div>

how about 2021 version? glide can’t automatically create the special column

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 17, 2021, 4:29am UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/25 "2021-04-17T04:29:28Z")

</div>

Did you do the columns in a Glide Table? If you have them in the Sheet, do you place them next to each other?

---

<div class="post-metadata">

**Author:** ![Zonez\_SF](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zonez_sf/32/26294_2.png) [@Zonez\_SF](https://community.glideapps.com/u/Zonez_SF)\
**Post date:** [May 25, 2021, 2:57am UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/26 "2021-05-25T02:57:59Z")

</div>

Hello all, does anybody know if instead of an image carousel, could an image change every time the user visits? For example, let’s say I’m making a tourism/city discovery app for NY. Maybe one time I open the app, I want an image of Times Square but the next time I visit, I want a picture of someplace more unique to locals like Union Square as locals won’t really care about Times Square if they live there.

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 25, 2021, 3:15am UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/27 "2021-05-25T03:15:01Z")

</div>

You can do this with [Single Value → Random](https://docs.glideapps.com/all/reference/data-editor/computed-columns/single-value-column)

---

<div class="post-metadata">

**Author:** ![daspearce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daspearce/32/26707_2.png) [@daspearce](https://community.glideapps.com/u/daspearce)\
**Post date:** [May 25, 2021, 2:01pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/28 "2021-05-25T14:01:44Z")

</div>

Odd, I just created 3 image columns, Image 1, Image 2, Image 3 next to each other, but in a table.  
I cant see the automatic column.  
Am I missing any special rules?  
do they have to be at the end of the sheet.  
this is a glide sheet with other columns, but they are next to each other.  
defined as images

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 25, 2021, 2:08pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/29 "2021-05-25T14:08:54Z")

</div>

> [@Image Carousel on New Glide](https://community.glideapps.com/t/image-carousel-on-new-glide/23297/2):
>
> Columns will only automatically merge into an array column if you use google sheets. That method doesn’t work for glide tables. What you will want to do is create a template column that merges each individual column together with a delimiter between each value in the template. Then use a Split Text column to split on that delimiter, which will convert it into an array column.

---

<div class="post-metadata">

**Author:** ![daspearce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daspearce/32/26707_2.png) [@daspearce](https://community.glideapps.com/u/daspearce)\
**Post date:** [May 25, 2021, 3:01pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/30 "2021-05-25T15:01:11Z")

</div>

That Works, Thanks Darren.

Ok, let me test this baby a bit more!!!  
So is there a way to have a dynamic text overlay on the carousel.  
ie. for each Image 1, 2,3 field, I have an overlay text field, that is also dynamically based on the picture I am showing.  
Tried and array, but that doesn’t work in the same way.

Maybe I am pushing you too far, but maybe there is some form of dynamic relationship or way I can make the caption field dynamic in some sort of way based on the image being shown!!

Come on, really impress me, If I am not already!!  
David

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 25, 2021, 3:02pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/31 "2021-05-25T15:02:21Z")

</div>

I don’t think there’s a way to do it natively as the carousel swipe does not trigger anything. Would have to make the overlay in Cloudinary I guess.

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [May 25, 2021, 3:14pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/32 "2021-05-25T15:14:50Z")

</div>

@daspearce you could do something similar with an inline list - tiles layout.  
Otherwise as @ThinhDinh says - use cloudinary to change the image by providing an overlay with relevant info

Inspiration for overlays can eg be seen here

> [@Image carousel - indication of mutiple images](https://community.glideapps.com/t/image-carousel-indication-of-mutiple-images/10391):
>
> Url: [https://imagecarouselv2.glideapp.io/](https://imagecarouselv2.glideapp.io/) [image] The image carousel functionality has changed so the image number overlay disappears after approx 2 seconds. That doesn’t work for me as the user might not see the number overlay - and thereby not realize that the image is actualy part of an image carousel - resulting in the user not using the image carousel. In the app there has been put an indicator in the button of the screen so the user can see that there are more images to se…

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 25, 2021, 5:01pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/34 "2021-05-25T17:01:23Z")

</div>

just for Laughs,  
isn’t that a carousel ???  
ok it’s not funny !!!

---

<div class="post-metadata">

**Author:** ![Cristian\_Figueiredo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/cristian_figueiredo/32/26168_2.png) [@Cristian\_Figueiredo](https://community.glideapps.com/u/Cristian_Figueiredo)\
**Post date:** [June 17, 2021, 7:02pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/35 "2021-06-17T19:02:18Z")

</div>

I use it automatically with this script

@import '//glidetools.ml/app-widgets/slideshow/1?slides=5&interval=2';

---

<div class="post-metadata">

**Author:** ![Rahul\_Mahto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rahul_mahto/32/31506_2.png) [@Rahul\_Mahto](https://community.glideapps.com/u/Rahul_Mahto)\
**Post date:** [September 8, 2021, 9:01am UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/36 "2021-09-08T09:01:48Z")

</div>

but when I created some columns from the same names like Image 1, Image 2, Image 3, etc. I haven’t found the main column which adds the images  
please help…[file:///C:/Users/User/Downloads/yufdy.pdf](file:///C:/Users/User/Downloads/yufdy.pdf)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 8, 2021, 9:10am UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/37 "2021-09-08T09:10:44Z")

</div>

Please attach a valid screenshot here so we can debug the issue.

Have you put them next to together in the Sheet or are you using Glide Tables?

---

<div class="post-metadata">

**Author:** ![Adrianne\_Stone](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adrianne_stone/32/34894_2.png) [@Adrianne\_Stone](https://community.glideapps.com/u/Adrianne_Stone)\
**Post date:** [November 20, 2021, 7:10pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/38 "2021-11-20T19:10:54Z")

</div>

> [@ThinhDinh](#):
>
> xt to together in the Sh

I was also having the issue where the array field was not showing up and it turns out that even though I put the columns next to each other in the data editor, they were not next to each other in the google sheet. Once I moved them the array column appeared. This needs to be added to the documentation because it was EXTREMELY frustrating.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 20, 2021, 11:46pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/39 "2021-11-20T23:46:56Z")

</div>

@PabloMFalero I think we can have a doc update regarding the issue above in the array column page.

> **[Array Column](https://docs.glideapps.com/all/reference/data-editor/computed-columns/array-column)**
>
> Combine multiple columns into a single column

---

<div class="post-metadata">

**Author:** ![Ana\_Alexandra\_Pinto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ana_alexandra_pinto/32/54535_2.png) [@Ana\_Alexandra\_Pinto](https://community.glideapps.com/u/Ana_Alexandra_Pinto)\
**Post date:** [July 11, 2023, 10:01pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/40 "2023-07-11T22:01:01Z")

</div>

This is exactly what I’m thinking of presenting as the option. Especially since the idea is for the images to be ads, so they all will most likely be clickable and direct to a URL. I’m still unsure if the fact that it doesn’t automatically rotate between ads that it’s a less interesting product. But still, lets see.

@Christopher_Breen How did you end up doing it and has it worked for you? (I guess since the original post is from 2019 you’ll probably have the best experience to share).

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [July 11, 2023, 10:50pm UTC](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/41 "2023-07-11T22:50:51Z")

</div>

With the things that have changed in the past couple of years, u could probably do something with a math column to get the current time, a roll dice column triggered by the time, and use that result as an index to find an image in an array of images.

[Previous page](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362.md?page=1)

[Next page](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362.md?page=3)
