# Automatic scrolling images in an inline list

**URL:** <https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076>\
**Category:** Ask for Help\
**Created:** [August 29, 2022, 7:38pm UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076 "2022-08-29T19:38:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![SimonD](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SimonD](https://community.glideapps.com/u/SimonD)\
**Post date:** [August 29, 2022, 7:38pm UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/1 "2022-08-29T19:38:01Z")

</div>

Hi everyone,

I have some images that are currently in an inline list. I would like them to scroll automatically to show a different image after a few seconds or have the image change automatically - a bit like an advertising banner. Anyone have any ideas on how I can make this happen?

Thanks in advance 😀

---

<div class="post-metadata">

**Author:** ![iamtomgray](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/iamtomgray/32/47662_2.png) [@iamtomgray](https://community.glideapps.com/u/iamtomgray)\
**Post date:** [August 30, 2022, 10:46am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/2 "2022-08-30T10:46:18Z")

</div>

Hello @SimonD. That’s a great question! Linking you with some of our leading experts who may have some suggestions on how to best do this.

cc @Darren_Murphy @nathanaelb @ThinhDinh @Robert_Petitto

---

<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:** [August 30, 2022, 10:49am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/3 "2022-08-30T10:49:22Z")

</div>

I saw this one earlier. The only way I think it might be possible is with some funky CSS. But that’s beyond my pay grade 😉

Thinh or Bob might know.

---

<div class="post-metadata">

**Author:** ![iamtomgray](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/iamtomgray/32/47662_2.png) [@iamtomgray](https://community.glideapps.com/u/iamtomgray)\
**Post date:** [August 30, 2022, 11:04am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/4 "2022-08-30T11:04:07Z")

</div>

There’s certainly a simple way to have new images displayed based on times, days, new logins triggered with actions, etc. As far as swiping animations, Glide doesn’t provide that natively.

---

<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:** [August 30, 2022, 11:15am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/5 "2022-08-30T11:15:17Z")

</div>

oh, yeah - I missed that bit. It’s easy enough to display a single image and have it change based on elapsed time.

@SimonD - how many images are involved?

---

<div class="post-metadata">

**Author:** ![SimonD](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SimonD](https://community.glideapps.com/u/SimonD)\
**Post date:** [August 30, 2022, 4:54pm UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/6 "2022-08-30T16:54:12Z")

</div>

Hi all,

Thanks so much for your replies. @Darren_Murphy @iamtomgray like the idea of having the images change by elapsed time or new logins, It would only involve a maximum of 20 images. Any further information about how to do this is much appreciated.  
Thanks Simon

---

<div class="post-metadata">

**Author:** ![DillanMartinez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dillanmartinez/32/46254_2.png) [@DillanMartinez](https://community.glideapps.com/u/DillanMartinez)\
**Post date:** [August 30, 2022, 5:20pm UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/7 "2022-08-30T17:20:33Z")

</div>

Hi, @SimonD use Css to do this in an app but I don’t think that’s what you want to achieve log in to the app and watch the first list of categories move to share the CSS with you.

> **[Pan Dorado](https://www.pandoradomarly.com/dl/767bfd)**
>
> Marly

---

<div class="post-metadata">

**Author:** ![SimonD](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SimonD](https://community.glideapps.com/u/SimonD)\
**Post date:** [August 30, 2022, 11:28pm UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/8 "2022-08-30T23:28:58Z")

</div>

Hi @DillanMartinez Yes the way the images are scrolling at the top of your app look like what I want to achieve, unfortunately I have absolutely no idea how to use CSS with my app (or even what CSS actually is to be honest)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 31, 2022, 12:07am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/9 "2022-08-31T00:07:34Z")

</div>

Add a Rich Text component anywhere on the screen with your image component and put the css code into it.

I use this one for scrolling images. I think out of the box this code is good for five images. You’ll have to play around with the ‘to {left: -1500px;}’ to get the scrolling accurate.

If you want the scrolling to be dynamic based on number of images… in the data editor add an ITE column that has different ‘px’ values based on the # of images.

Next put the CSS code in a template column and replace the -1500px with the new ITE coulumn. Finally put the template column into a rich text component instead of pasting code directly into it.

I hope this helps!

```auto
<pre><span><style>
.scroller{
width: 100px;
height: 100px;
background: red;
position: relative;
animation: move 10s infinite;
animation-timing-function: ease-out;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
animation-timing-function: linear;
}
@keyframes move {
from {left: 0px;}
to {left: -1500px;}
}

```

Courtesy of @Manu.n

---

<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:** [August 31, 2022, 1:01am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/10 "2022-08-31T01:01:32Z")

</div>

I believe this is the correct way to do it. Back in the days there was a way to import CSS settings from an external website called glidetools, but that project seems to not be active anymore.

---

<div class="post-metadata">

**Author:** ![SimonD](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SimonD](https://community.glideapps.com/u/SimonD)\
**Post date:** [August 31, 2022, 1:05am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/11 "2022-08-31T01:05:33Z")

</div>

Hi @Eric_Penn , thanks very much for the reply. I have a static image and 2 inline lists of images (these are what I want to scroll through) is it possible to select only the 2 inline lists to be impacted by this code? I also have no idea what an ITE column is so I am struggling with the next bit of your advice (apologies for my ignorance)  
Simon

---

<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:** [August 31, 2022, 1:41am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/12 "2022-08-31T01:41:00Z")

</div>

> [@SimonD](#):
>
> like the idea of having the images change by elapsed time or new logins, It would only involve a maximum of 20 images. Any further information about how to do this is much appreciated.

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 between 1 and _N_ (where _N_ is your number of images), that changes every 10 seconds.
- Next, you need a Math column that adds 1 to the result of the Roll Dice column.
- Finally, you can use an [Array Slice](https://www.glideapps.com/plugins/slice-array) column to extract a random image from the array. The start position will be the result of the dice roll, and then end position will be the result of the math column.

Then all you need to do is add an image component to your screen, and target it at the array slice column. You should see a random image from your set, that changes every 10 seconds.

---

<div class="post-metadata">

**Author:** ![SimonD](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SimonD](https://community.glideapps.com/u/SimonD)\
**Post date:** [August 31, 2022, 2:05am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/13 "2022-08-31T02:05:19Z")

</div>

Hi @Darren_Murphy thanks for this, I am working my way down the instructions. Can you give me some guidance on how to set up the Math column please?

---

<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:** [August 31, 2022, 2:07am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/14 "2022-08-31T02:07:11Z")

</div>

![Screen Shot 2022-08-31 at 10.06.04 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/43e033800f5b4ccb38262c49d64ae49a57a75ae5.png)

---

<div class="post-metadata">

**Author:** ![DillanMartinez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dillanmartinez/32/46254_2.png) [@DillanMartinez](https://community.glideapps.com/u/DillanMartinez)\
**Post date:** [August 31, 2022, 2:07am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/15 "2022-08-31T02:07:54Z")

</div>

that sounds great i’ll try to see if i can pull this off

---

<div class="post-metadata">

**Author:** ![SimonD](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SimonD](https://community.glideapps.com/u/SimonD)\
**Post date:** [August 31, 2022, 2:20am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/16 "2022-08-31T02:20:16Z")

</div>

Thanks @Darren_Murphy your help is much appreciated…I think that I am on the last part, I have added the image button but I cant find the right source to target it at the array slice 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:** [August 31, 2022, 2:24am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/17 "2022-08-31T02:24:15Z")

</div>

> **[Random Images](https://www.loom.com/share/9b95d2af76c14ab6997d54ef8c76bf3a)**

---

<div class="post-metadata">

**Author:** ![SimonD](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SimonD](https://community.glideapps.com/u/SimonD)\
**Post date:** [August 31, 2022, 2:24am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/18 "2022-08-31T02:24:35Z")

</div>

@Darren_Murphy I worked out how to target the Array from within the inline list and so far it is working a treat! Cheers buddy

---

<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:** [August 31, 2022, 2:27am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/19 "2022-08-31T02:27:36Z")

</div>

hehe, sounds like you’re doing something different. But that’s fine, as long as you have the result you wanted 😉

---

<div class="post-metadata">

**Author:** ![DillanMartinez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dillanmartinez/32/46254_2.png) [@DillanMartinez](https://community.glideapps.com/u/DillanMartinez)\
**Post date:** [August 31, 2022, 2:31am UTC](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076/20 "2022-08-31T02:31:36Z")

</div>

Amazing 😍😍😍

[Next page](https://community.glideapps.com/t/automatic-scrolling-images-in-an-inline-list/48076.md?page=2)