As Glide hasn’t supported an array of images (a carousel) in Pages, I doubt this is possible.
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
<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.
.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.
1 Like
Does auto slider image apply to pages as well?
You would have to follow the instructions from the comment just above, and have Business/Enterprise so you can use CSS.
Is this feature valid for glide pages?
I am
- using mutli-images upload to Glide Table,
- put the above code to rich text
BUT unable to get auto slider to work.
Kindly advise. TQ
That’s not how it works with the new Glide Apps.
The CSS needs to be inserted via Settings->Appearance->Custom CSS.
See below:
1 Like
thanks. working fine.
I love this! 
hi,
the images are being access from pexels.com
is there a way to make it access from the glide table?
TQ
Wouldn’t you just need to swap the image URLs with yours? Or it doesn’t work?
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
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.
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
Yeah, that shouldn’t matter. Are you having those in multiple rows or only one row?
just 1 row.
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.
1 Like