Automatic scrolling images in an inline list

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 :grinning:

1 Like

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

1 Like

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 :wink:

Thinh or Bob might know.

1 Like

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.

1 Like

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?

1 Like

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

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.

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)

1 Like

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!

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


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.

1 Like

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)

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 column and addressing your image column directly.
  • Next, add a Roll 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 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.


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?

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

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?


@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

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

Amazing :heart_eyes::heart_eyes::heart_eyes: