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 
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.
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.
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.
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?
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)
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!
<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
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.
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
Okay, so the way I would approach this is as follows:
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
Amazing 
