Auto slider image carousel

Project Showcase
1

Hey there gliders.

I am bringing you the automatic slider feature in Glide.
The video can be found below

The code to do the same has to be put in rich text.

<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;}
}

Time can be increased from 10seconds in animation: move 10s infinite;
move is the function name
10seconds is the time
infinite is for how many times it should do.
You can specify a number too.

Examples:
animation: move 10s infinite;
animation: move 30s infinite; //30 Seconds and infinite scroll
animation: move 10s 2; //10 seconds and autoscrolls twice

31 Likes
2

@ShantanuIyengar Very interesting. Thank you for sharing. What kind of image do you use?

3

It’s a lookup column from another sheet of just the images.

4

Yes, image array. Thank You.

5

Great idea, I love it. I still don’t understand why something so easy to build isn’t already a part of Glide’s repertoire. I’m building my second no code app creator (1st one sold). Some of the menu animations I’ve come up with so far.

10 Likes
6

Some more animations I will be adding.

6192339366cde783105bfef9_68747470733a2f2f692e6962622e636f2f4e3166687078422f30312e676966 (1)

7 Likes
7

I don’t get it. Is this in Glide, or your own “no code app creator”?

8

I don’t think this is glide

9

I did it in glide and moving it to my own no code.

2 Likes
10

Share the link

11

What do you mean? To the app or the no code app builder? The builder will be launching late January and the app is a corporate app that I do not own, has employee info in it. It is just built and maintained by me.

1 Like
12

wow
this is amazing, I’ve been waiting for this for a long time, hopefully glide can bring this feature.

is there a way to set it to work on certain images only…?

I’ve tried this, but anything related to this image will be affected, and it’s not what I expected…

Thank you for sharing…

13

App’s link or is it native?

1 Like
14

It will be native in the app creator, you can just select the animation you want, or even enter css and html directly into the app.

15

Amazing. Can you describe the use case, l mean how you did that?

16

Yes, its possible! You have to find the exact element position by
parent > child > child > child > image {

}

I can help you out if you need anything specific
You can email me at shantanu@modernizing-spaces.com

17

A great tool to use is Visual CSS Editor. Its a chrome extension and it will identify any part of your app for you.

image

You just click the button and select the part of the app you want to change, you can then visually change the appearance and it will provide you with the code tha refelcts your changes. Additionally CSS Scan can help you identify the path for the CSS or you can just go old school with F12. Chrome has a selector button that works in the same manner.

5 Likes
18

As someone who knows nothing about CSS this is very cool.

Thank you for sharing!

3 Likes
19

Wow amazing. is the application finished?

I’ve also posted about css animations

1 Like
20

Hi, is it possible in Glide pages, too? Could you please explain how I should connect rich text and the images? I can’t really get the idea
Thanks a lot beforehand