# Auto slider image carousel

**URL:** <https://community.glideapps.com/t/auto-slider-image-carousel/35642>\
**Category:** Project Showcase\
**Created:** [December 7, 2021, 4:23pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642 "2021-12-07T16:23:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShantanuIyengar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shantanuiyengar/32/35546_2.png) [@ShantanuIyengar](https://community.glideapps.com/u/ShantanuIyengar)\
**Post date:** [December 7, 2021, 4:23pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/1 "2021-12-07T16:23:41Z")

</div>

Hey there gliders.

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

[https://i.imgur.com/oMrOD9B.mp4](https://i.imgur.com/oMrOD9B.mp4)

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 7, 2021, 4:33pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/2 "2021-12-07T16:33:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ShantanuIyengar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shantanuiyengar/32/35546_2.png) [@ShantanuIyengar](https://community.glideapps.com/u/ShantanuIyengar)\
**Post date:** [December 7, 2021, 4:40pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/3 "2021-12-07T16:40:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 7, 2021, 4:57pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/4 "2021-12-07T16:57:56Z")

</div>

Yes, image array. Thank You.

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 7, 2021, 5:50pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/5 "2021-12-07T17:50:19Z")

</div>

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.

[![]( " - YouTube") ](https://www.youtube.com/watch?v=mLQqxQwzeFo)

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 8, 2021, 2:48am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/6 "2021-12-08T02:48:43Z")

</div>

Some more animations I will be adding.

![6192339366cde783105bfef9_68747470733a2f2f692e6962622e636f2f4e3166687078422f30312e676966 (1)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/9/89205a153cd17804afea70030745afe0fe364e71.gif)

---

<div class="post-metadata">

**Author:** ![NFNHello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nfnhello/32/3371_2.png) [@NFNHello](https://community.glideapps.com/u/NFNHello)\
**Post date:** [December 8, 2021, 4:09pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/7 "2021-12-08T16:09:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ShantanuIyengar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shantanuiyengar/32/35546_2.png) [@ShantanuIyengar](https://community.glideapps.com/u/ShantanuIyengar)\
**Post date:** [December 8, 2021, 8:07pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/8 "2021-12-08T20:07:25Z")

</div>

I don’t think this is glide

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 8, 2021, 8:54pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/9 "2021-12-08T20:54:01Z")

</div>

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

---

<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:** [December 8, 2021, 9:55pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/10 "2021-12-08T21:55:28Z")

</div>

Share the link

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 8, 2021, 10:17pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/11 "2021-12-08T22:17:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [December 9, 2021, 12:07am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/12 "2021-12-09T00:07:31Z")

</div>

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…

---

<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:** [December 9, 2021, 1:21am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/13 "2021-12-09T01:21:41Z")

</div>

> [@Drearystate](#):
>
> What do you mean?

App’s link or is it native?

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 9, 2021, 3:04am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/14 "2021-12-09T03:04:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jabid](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jabid/32/33391_2.png) [@jabid](https://community.glideapps.com/u/jabid)\
**Post date:** [December 9, 2021, 4:59am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/15 "2021-12-09T04:59:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ShantanuIyengar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shantanuiyengar/32/35546_2.png) [@ShantanuIyengar](https://community.glideapps.com/u/ShantanuIyengar)\
**Post date:** [December 9, 2021, 4:40pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/16 "2021-12-09T16:40:07Z")

</div>

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](mailto:shantanu@modernizing-spaces.com)

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 9, 2021, 10:44pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/17 "2021-12-09T22:44:28Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/24fffd284879882e218d34d1b2417778b983b337.png)

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.

---

<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:** [December 9, 2021, 11:06pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/18 "2021-12-09T23:06:51Z")

</div>

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

Thank you for sharing!

---

<div class="post-metadata">

**Author:** ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)\
**Post date:** [March 4, 2022, 2:47am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/19 "2022-03-04T02:47:48Z")

</div>

Wow amazing. is the application finished?

I’ve also posted about css animations

---

<div class="post-metadata">

**Author:** ![gendelmanliudmila](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gendelmanliudmila/32/51068_2.png) [@gendelmanliudmila](https://community.glideapps.com/u/gendelmanliudmila)\
**Post date:** [February 28, 2023, 6:53pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/20 "2023-02-28T18:53:33Z")

</div>

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

[Next page](https://community.glideapps.com/t/auto-slider-image-carousel/35642.md?page=2)