# Create an image gallery/carousel in Glide Pages

**URL:** <https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993>\
**Category:** Ask for Help\
**Created:** [June 12, 2022, 3:50pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993 "2022-06-12T15:50:54Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![federicoj](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federicoj/32/42648_2.png) [@federicoj](https://community.glideapps.com/u/federicoj)\
**Post date:** [June 12, 2022, 3:50pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/1 "2022-06-12T15:50:54Z")

</div>

Hi, I’m trying to create an image gallery inside a Glide Pages website.  
The page in the website is intended to be a collection of latest events of an association. When a user wants to read more about one of these events, another page should open, with the title of the event, some info and a gallery of pictures.

I’ve read other posts in the forum and tried to create the image gallery following these steps:

- using Glide database I first created n columns for each picture;
- I then created an array (“make array”) column where all the photos are combined
- in the webpage I inserted “+” \> “content” \> “image”
- finally I linked the image placeholder to the array column from the database

The issue is that only the first photo of the array is displayed and there are no ways to navigate the gallery (not by swiping on mobile, nor by clicking anything on the screen on a pc). When I inspect the element on Chrome I only see the link of the first image of the gallery, as if the others are not even being loaded.  
In the Data Editor I see all the pictures in the array column as intended (see screenshots attached).

What am I missing? Why isn’t this working?

Thank you

 ![Screen Shot 2022-06-12 at 17.46.08](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/e/8e2334cc3f2b609341e23b63da8b2ea4c4561c43.jpeg)  
 ![Screen Shot 2022-06-12 at 17.46.49](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/4/f4a33272d26ec1206682fc5379be911bbebf8620.jpeg)  
 ![Screen Shot 2022-06-12 at 17.46.22](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/8/a8871449c44d449f3f59c72ae78c8a92786a7f57.jpeg)  
 ![Screen Shot 2022-06-12 at 17.49.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/101f9ff26c9330b57ccf8d5bf77cdb80980bf6ae.jpeg)  
 ![Screen Shot 2022-06-12 at 17.49.47](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/0/c0c4dd27215de561dc76e9ff62ce8771281ce587.jpeg)

---

<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:** [June 12, 2022, 4:09pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/2 "2022-06-12T16:09:13Z")

</div>

I don’t believe Pages have the image gallery option yet. Only Apps do. Even if you did get the gallery to work, I don’t think there is a way to assign individual actions or links to each image. What we’ve done in the past with Apps is to use a tiles list with a horizontal layout, or maybe the swipe layout.

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [June 12, 2022, 4:59pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/3 "2022-06-12T16:59:04Z")

</div>

Not having the gallery option still available in Pages as @Jeff_Hager said, I think you can define two buttons, forward and backward to which to bind an action that increases / decreases an index.  
Then you can define a “single value” column to retrieve the image element from the array using that index.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 12, 2022, 5:51pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/4 "2022-06-12T17:51:04Z")

</div>

@roldy’s solution is a good alternative until image carousel in Pages is a thing.

---

<div class="post-metadata">

**Author:** ![federicoj](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federicoj/32/42648_2.png) [@federicoj](https://community.glideapps.com/u/federicoj)\
**Post date:** [June 13, 2022, 7:05am UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/5 "2022-06-13T07:05:48Z")

</div>

Hi Roldy, thanks for the tips.  
If I’m not asking too much, could you please be so kind as to send me a gif/video of the actions you are suggesting so that I can recreate it in my project?  
Thank you!

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [June 13, 2022, 8:12am UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/6 "2022-06-13T08:12:40Z")

</div>

Sorry no audio in this video, I don’t have the microphone where I recorded it.

---

<div class="post-metadata">

**Author:** ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)\
**Post date:** [June 13, 2022, 10:47am UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/7 "2022-06-13T10:47:38Z")

</div>

Did a video about Image carousel in Pages too in past! : [Pages Carousel Wokaround.mp4 - Google Drive](https://drive.google.com/file/d/1Uvww8ypyKiBT91fPz38l6du_ji2O1swX/view)

But Roldy’s method is too easy! Thanks Roldy! 💪 I did not aware that we can do this easily with the Make Array column 🤦‍♂️

---

<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:** [June 13, 2022, 11:12am UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/8 "2022-06-13T11:12:04Z")

</div>

Make Array has many many uses. Just ask @Robert_Petitto 😉

---

<div class="post-metadata">

**Author:** ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)\
**Post date:** [June 13, 2022, 12:52pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/9 "2022-06-13T12:52:48Z")

</div>

Robert 💪

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/4/740fd4567595d6bf528afdccd79a59bcbb013261.gif)

---

<div class="post-metadata">

**Author:** ![sardamit](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sardamit/32/263_2.png) [@sardamit](https://community.glideapps.com/u/sardamit)\
**Post date:** [December 7, 2022, 8:48pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/10 "2022-12-07T20:48:18Z")

</div>

Created a [How To video of how I have been creating an image gallery for my Glide Pages](https://youtu.be/378_OQQb4Pw) projects.

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [December 8, 2022, 1:12pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/11 "2022-12-08T13:12:46Z")

</div>

Maybe my newest post on the use of [Curator.io](http://Curator.io) might help.  
It has many different image galleries.  
[Curator.io with Glide](https://community.glideapps.com/t/curator-io-with-glide/55557)

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [February 27, 2023, 6:52am UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/12 "2023-02-27T06:52:08Z")

</div>

Thanks, this was super-helpful and I have successfully duplicated a couple of these.

---

<div class="post-metadata">

**Author:** ![DarrenHumphries](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darrenhumphries/32/91715_2.png) [@DarrenHumphries](https://community.glideapps.com/u/DarrenHumphries)\
**Post date:** [April 10, 2023, 7:07pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/13 "2023-04-10T19:07:05Z")

</div>

I like this! Created one I can use to show to clients. A small change I made was to do a count of the images in the array as my max index column so it never goes higher than the number of images I have in the array and allows me to do a template showing that it’s image ‘x’ of ‘n’.

Super nice and clear way to do the carousel. Thanks, Roldy!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/ab00ca2eb4cae94b73403a35aca6dd95e5961dd5.jpeg)

---

<div class="post-metadata">

**Author:** ![AlphaBCD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alphabcd/32/56402_2.png) [@AlphaBCD](https://community.glideapps.com/u/AlphaBCD)\
**Post date:** [May 29, 2023, 6:50pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/14 "2023-05-29T18:50:31Z")

</div>

Do you have performance issues with lots of images on this?

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [May 29, 2023, 11:33pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/15 "2023-05-29T23:33:41Z")

</div>

Hola a todos!

Watching the @Roldy 's idea, I wanted to improve it and avoid creating as many columns as images our carousel is going to have.

Due to I hate creating unnecessary columns in Glide (I’m a little lazy 😇), I thought this workaround:

1. Create your own Image Gallery using a specific table (it can have as images as you want):  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/8/280d3415a5bdd8c9bb1d0ac0dc68579b6add151d.png)

2. Now, from another table you can create an Image Array via Lookup column and join/use all your images whenever you want  

3. That’s all. From here, you can use Roldy’s procedure (using an action to increment/decrement the index of the array) without issue. As you can see, we only needed to create **2 columns** no matter how many images were needed.

_ **But let’s complicate the problem** _ if we have a more complex requirement: we want to choose which images will be used by the carousel dynamically … 🔨

1. We already have our own Image Gallery using a specific table  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/8/280d3415a5bdd8c9bb1d0ac0dc68579b6add151d.png)

2. Use the same Image Array via Lookup column showed in step #2 above but now creating a list of our favorite images that will be displayed in carousel. We need to create an Item List (or image list) as a Text column and then, via a Split Text column convert that list into an array (Item[])  

3. Finally, we need to create a relation between our new array (item[]) and IDs of our Image Album to get our new Carousel via a Lookup column

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/51e6a68e19ebfbbb351be84cb4ac2f4999ad23b3.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8b244b749b5c2276f9377eda169b9e21174fc8b9.png)

1. With this setup, you can have several carousels if you want. You just need to add rows, change your list of items and it’s all folks!  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/5/55112acaabde26b9bff7200decea1f8066a703a9.jpeg)

Of course, after this, you must follow the Roldy’s procedure to get a smart and nice result.

**EDIT** :  
Unfortunately, use an action to increment/decrement the array’s index will eat up your update quota very fast, so the plan B is to work with a Collection using our relation as source and setting Orientation to _Horizontal_.

Your carousel should look like:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/0/a0fb1f06e4c867bba84c90fbe5429bebe0bb7ed5.jpeg)

I hope it helps anyone!.

Feliz noche!

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [May 30, 2023, 1:43pm UTC](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages/42993/16 "2023-05-30T13:43:52Z")

</div>

i hope the glide team can see this
