# 🏞️ Simple Image Carousel (Using New Query Column)

**URL:** <https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384>\
**Category:** Community Resources\
**Tags:** tutorial\
**Created:** [June 2, 2023, 11:23am UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384 "2023-06-02T11:23:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [June 2, 2023, 11:23am UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/1 "2023-06-02T11:23:00Z")

</div>

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b3b0bd314e3175900b9b3d93248a823c9e38f179.jpeg "🎓 Glide Tutorial - Simple Image Carousel (Using Query)") ](https://www.youtube.com/watch?v=z8GvK7QJ1Fg)

**What’s up Gliders!**

Here’s a simple tutorial explaining how to create an image carousel using Glides new Query column. To my knowledge nobody has posted this method before and it seems like a _fairly_ decent solution to me…? The only issue I see is that the slide number isn’t user specific so you may run into some sliding chaos 😅

There are of course more scalable/elegant ways to get the job done but this was the first method that came to mind so I kept everything basic for the tutorial.

Interested to hear your thoughts!

---

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [June 2, 2023, 11:56am UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/2 "2023-06-02T11:56:40Z")

</div>

**Quick Update:** Looks like you _can_ in fact make the slide number “user-specific” which means everyone can slide at their own pace without the slides being changed by other users 🔥

![Image Carousel Small](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76d2c69765cf4a6c880b07622f20b5d4075eb63e.gif)

---

<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 2, 2023, 12:34pm UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/3 "2023-06-02T12:34:53Z")

</div>

Nice and simple 👍

But obviously it won’t scale very well - imagine what your custom action would look like if you had a carousel of 100 images 😉

A more scalable approach might be something like:

- Use a rollup to count the number of images
- Then with your custom action (right hand side):  
– If current index is less than image count, then increment current index by 1  
– Else set column values → current index → 1
- Do the opposite with the left button action, ie.  
– If current index is greater than 1, then increment current index by -1  
– Else set column values → current index → image count

That should give you the same effect that you have now, but will scale to any number of images without modifying the action.

---

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [June 2, 2023, 12:56pm UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/4 "2023-06-02T12:56:31Z")

</div>

Thanks Darren!

Of course! I’m not even sure a custom action could support so many if/then arguments 🤣

I only had 3 images in the example so I used the first method that came to mind… but your alternative is definitely a more elegant solution 👏

> [@Loqode](#):
>
> _There are of course more scalable/elegant ways to get the job done but this was the first method that came to mind so I kept everything basic for the tutorial._

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [June 2, 2023, 1:12pm UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/5 "2023-06-02T13:12:11Z")

</div>

That’s what I’d do

Thanks for sharing @Loqode 🤌

---

<div class="post-metadata">

**Author:** ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)\
**Post date:** [June 2, 2023, 5:36pm UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/6 "2023-06-02T17:36:58Z")

</div>

Great tutorial but I am very worried about what this would do to the updates quota…

In one of my Apps, I use the method that @Darren_Murphy once shared in the forum. It involved the “roll-dice” column and then slicing the array.  
That has zero impact on my updates and the slides are automatically changed. I just can’t seem to find that thread at the moment, maybe Darren can point to it. It is very helpful for me until we have something native for an image carousel.

---

<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 2, 2023, 6:04pm UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/7 "2023-06-02T18:04:14Z")

</div>

> [@Luther](#):
>
> In one of my Apps, I use the method that @Darren_Murphy once shared in the forum. It involved the “roll-dice” column and then slicing the array.  
> That has zero impact on my updates and the slides are automatically changed. I just can’t seem to find that thread at the moment, maybe Darren can point to it.

Maybe this one?

> [@Automatic scrolling images in an inline list](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/12):
>
> Okay, so the way I would approach this is as follows: Start by creating an array of images. If you’re currently using them in an Inline List, then I assume you have all your images in a single column. If that’s the case, you can create an array by using a [lookup](https://www.glideapps.com/docs/reference/computed-columns/lookup-column) column and addressing your image column directly. Next, add a [Roll Dice](https://www.glideapps.com/plugins/dice) column. Use the current date/time as a seed value, and the number of sides should be one less than your number of images. This will give you a random number betwe…

---

<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:** [June 2, 2023, 6:05pm UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/8 "2023-06-02T18:05:53Z")

</div>

Sure!

We talked about this workaround time ago here [https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages](https://community.glideapps.com/t/create-an-image-gallery-carousel-in-glide-pages) with new features/tricks but good to know that there is a newer video able to show all this!

Saludos

---

<div class="post-metadata">

**Author:** ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)\
**Post date:** [June 2, 2023, 7:57pm UTC](https://community.glideapps.com/t/simple-image-carousel-using-new-query-column/62384/9 "2023-06-02T19:57:09Z")

</div>

Bingo 🎯. That’s the one. That’s the work of genius. I still marvel how you come up with these things 🤗
