# 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:** 17\
**Page:** 2

<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:** [March 1, 2023, 12:26am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/21 "2023-03-01T00:26:48Z")

</div>

As Glide hasn’t supported an array of images (a carousel) in Pages, I doubt this is possible.

---

<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:** [March 16, 2023, 4:08pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/22 "2023-03-16T16:08:38Z")

</div>

Dear @gendelmanliudmila , I would like to inform you that custom CSS can indeed be enabled in Glide Pages. However, a business plan is required for this functionality to be accessible.

Here is a small demo and how to set it up, if you do plan to use it.

Demo Link:

Add this to a rich text element on your screen

```auto
<div class="container">
  <div class="carousel">
    <div class="carousel__face"></div>
    <div class="carousel__face"></div>
    <div class="carousel__face"></div>
    <div class="carousel__face"></div>
    <div class="carousel__face"></div>
    <div class="carousel__face"></div>
    <div class="carousel__face"></div>
    <div class="carousel__face"></div>
    <div class="carousel__face"></div>
  </div>
</div>

```

Add this to the custom css section of your app.

```auto
.container {
     position: relative;
     width: 320px;
     margin: 100px auto 0 auto;
     perspective: 1000px;
}
 .carousel {
     position: absolute;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     animation: rotate360 60s infinite forwards linear;
}
 .carousel__face {
     position: absolute;
     width: 300px;
     height: 187px;
     top: 20px;
     left: 10px;
     right: 10px;
     background-size: cover;
     box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
     display: flex;
}
 .carousel__face:nth-child(1) {
     background-image: url("https://images.pexels.com/photos/1141853/pexels-photo-1141853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY( 0deg) translateZ(430px);
}
 .carousel__face:nth-child(2) {
     background-image: url("https://images.pexels.com/photos/1258865/pexels-photo-1258865.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY( 40deg) translateZ(430px);
}
 .carousel__face:nth-child(3) {
     background-image: url("https://images.pexels.com/photos/808466/pexels-photo-808466.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY( 80deg) translateZ(430px);
}
 .carousel__face:nth-child(4) {
     background-image: url("https://images.pexels.com/photos/1394841/pexels-photo-1394841.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY(120deg) translateZ(430px);
}
 .carousel__face:nth-child(5) {
     background-image: url("https://images.pexels.com/photos/969679/pexels-photo-969679.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY(160deg) translateZ(430px);
}
 .carousel__face:nth-child(6) {
     background-image: url("https://images.pexels.com/photos/1834400/pexels-photo-1834400.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY(200deg) translateZ(430px);
}
 .carousel__face:nth-child(7) {
     background-image: url("https://images.pexels.com/photos/1415268/pexels-photo-1415268.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY(240deg) translateZ(430px);
}
 .carousel__face:nth-child(8) {
     background-image: url("https://images.pexels.com/photos/135018/pexels-photo-135018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY(280deg) translateZ(430px);
}
 .carousel__face:nth-child(9) {
     background-image: url("https://images.pexels.com/photos/1175135/pexels-photo-1175135.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
     transform: rotateY(320deg) translateZ(430px);
}
 @keyframes rotate360 {
     from {
         transform: rotateY(0deg);
    }
     to {
         transform: rotateY(-360deg);
    }
}

```

You can contact me anytime, if you do need any additional help.

---

<div class="post-metadata">

**Author:** ![\_ffwpu](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/_ffwpu/32/16380_2.png) [@\_ffwpu](https://community.glideapps.com/u/_ffwpu)\
**Post date:** [December 11, 2023, 8:40am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/23 "2023-12-11T08:40:56Z")

</div>

Does auto slider image apply to pages as well?

---

<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:** [December 11, 2023, 11:44pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/24 "2023-12-11T23:44:50Z")

</div>

You would have to follow the instructions from the comment just above, and have Business/Enterprise so you can use CSS.

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [April 4, 2024, 5:01am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/25 "2024-04-04T05:01:43Z")

</div>

Is this feature valid for glide pages?  
I am

1. using mutli-images upload to Glide Table,
2. put the above code to rich text  
BUT unable to get auto slider to work.

Kindly advise. TQ

---

<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:** [April 4, 2024, 5:24am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/26 "2024-04-04T05:24:58Z")

</div>

That’s not how it works with the new Glide Apps.  
The CSS needs to be inserted via Settings-\>Appearance-\>Custom CSS.

See below:

 ![CleanShot 2024-04-04 at 13.23.38@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e1e730e49a6b2bd6ac349ceee7ba5220c35a1027.jpeg)

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [April 4, 2024, 7:25am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/27 "2024-04-04T07:25:44Z")

</div>

thanks. working fine.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [April 7, 2024, 7:01am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/28 "2024-04-07T07:01:39Z")

</div>

I love this! 😍

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [April 7, 2024, 9:05am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/29 "2024-04-07T09:05:45Z")

</div>

hi,  
the images are being access from [pexels.com](http://pexels.com)

is there a way to make it access from the glide table?

TQ

---

<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:** [April 7, 2024, 11:13pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/30 "2024-04-07T23:13:39Z")

</div>

Wouldn’t you just need to swap the image URLs with yours? Or it doesn’t work?

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [April 7, 2024, 11:38pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/31 "2024-04-07T23:38:59Z")

</div>

yes. I can upload the file into Glide table with image picker and then get the URL from there to paste into the code.  
However, I am thinking if it can be more friendly where the system can just access the actual cell in the Glide table. In this case, if there is need to update images, we do not need to access development to copy the new URL.

TQ

---

<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:** [April 7, 2024, 11:40pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/32 "2024-04-07T23:40:44Z")

</div>

Do you have the same number of images for every carousel or not?

I’m thinking of a dynamic joined list where you pre-calculate the rotateY degrees and the nth-child index.

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [April 7, 2024, 11:44pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/33 "2024-04-07T23:44:22Z")

</div>

yes. I can define it to be same number of images. BUT any number of images can be updated, eg it can be just update of one image, not necessarily ALL will be updated at one time.

TQ

---

<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:** [April 7, 2024, 11:48pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/34 "2024-04-07T23:48:18Z")

</div>

Yeah, that shouldn’t matter. Are you having those in multiple rows or only one row?

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [April 7, 2024, 11:49pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/35 "2024-04-07T23:49:53Z")

</div>

just 1 row.

---

<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:** [April 7, 2024, 11:51pm UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/36 "2024-04-07T23:51:30Z")

</div>

Ah sorry, I just noticed the code is for the new version of Glide, and you can’t dynamically point that CSS part to a column, so my method isn’t viable.

---

<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:** [April 29, 2024, 6:43am UTC](https://community.glideapps.com/t/auto-slider-image-carousel/35642/37 "2024-04-29T06:43:50Z")

</div>

In the CSS code, you can create a template column

```auto
<div class="container">
  <div class="carousel">
    <div class="carousel__face" style="background-image:<url1>"></div>
    <div class="carousel__face" style="background-image:<url2>"></div> 
    <div class="carousel__face" style="background-image:<url3>"></div>
    <div class="carousel__face" style="background-image:<url4>"></div>
    <div class="carousel__face" style="background-image:<url5>"></div>
    <div class="carousel__face" style="background-image:<url6>"></div>
    <div class="carousel__face" style="background-image:<url7>"></div>
  </div>
</div>

```

and remove the background-image from the css section

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