ok thanks a mil! I got it.
Iāll test it out a little later.
1 Like
It seems that I missed copying a part of the code for the height of the frame on the cellphone display.
.mobile-layer #main-root:has(.cardousel) [data-testid="card-image"] {
height: 300px;
}
1 Like
you are the best!
1 Like
my cardousel on PC. I added a gap for the clothes-line look and shadow for 3-d appearance. Everything is travelling to the left at a comfortable speed and pausing to make reading easy. Love it.
And if you donāt know what the clothes-line look is, hehe:
1 Like
Maybe you have never experienced using bamboo instead of rope. 
this is how we use bamboo 
1 Like
@Himaladin , my vertical text looks good on the mobile phone but it is too big on the PC. Is there a way to fix it?ā
It looks like my images are shorter on the pc.
For the text section, I have provided paired text settings for each code block on the desktop and mobile displays.
Meanwhile, when it comes to image size, you can use the aspect-ratio settings in the Glide configuration panel.
And it looks like you have modified the initial code, so I donāt know what code you are implementing. Maybe you can return them one by one to understand the effect.
Actually, If you want to make it autoscroll, you can simply remove this part:
/*Desktop style*/
//.cardousel {
display: block;
position: relative;
width: calc(100% - 20px);
height:100%;
overflow: hidden;
border-radius: 10px;
margin-left:10px;
}
Set the asect-ratio in the configuration panel. Each of these changes requires resetting all the code in the text section, especially the width and font-size
1 Like
ok. In this part, I only changed the border-radius to zero to close the curved gap at the edge of the container. Other than that, I added frames, balanced the translated offset so the pictures appear in the middle of the screen, decreased the speed and created a second version vcardousel for the carousel where I want vertical textā¦
I didnāt change much 
but I see that there are some different elements in the code you just provided. For example, margin-left.
/* Container styling */
.vcardousel {
display: block;
position: relative;
width: 100%;
overflow: hidden;
width: 100%;
border-radius: 0px;
}
/*First frame*/
#main-root [data-testid="wire-container-vcardousel"] > div {
padding: 0;
}
.vcardousel .horizontal {
width: 100% !important;
gap:5 ;
overflow: visible;
padding:0;
}
.vcardousel [data-testid="horizontal-collection-container"].horizontal img {
border-radius: 0;
}
.vcardousel [data-testid="cc-card"] > div > div:nth-child(2) {
padding: 0;
}
/* Slide animation */
@keyframes slide-In {
0%, 100% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
90% {
transform: translateX(calc(-100% * 5));
}
100% {
transform: translateX(calc(-100% * 5));
}
}
.vcardousel [data-testid="horizontal-collection-container"] > div {
animation: slide-In 50s linear infinite;
}
/* Slide animation with pause */
@keyframes slide-In {
0% {
transform: translateX(0%);
}
5% {
transform: translateX(0%);
}
10% {
transform: translateX(-102%);
}
15% {
transform: translateX(-102%);
}
20% {
transform: translateX(-205%);
}
25% {
transform: translateX(-205%);
}
30% {
transform: translateX(-307%);
}
35% {
transform: translateX(-307%);
}
40% {
transform: translateX(-409%);
}
45% {
transform: translateX(-409%);
}
50% {
transform: translateX(-511%);
}
55% {
transform: translateX(-511%);
}
60% {
transform: translateX(-613%);
}
65% {
transform: translateX(-613%);
}
70% {
transform: translateX(-715%);
}
75% {
transform: translateX(-715%);
}
80% {
transform: translateX(-819%);
}
84% {
transform: translateX(-819%);
}
88% {
transform: translateX(-920%);
}
92% {
transform: translateX(-920%);
}
94% {
transform: translateX(-1022%);
}
96% {
transform: translateX(-1022%);
}
100% {
transform: translateX(-1022%);
}
}
No. Just throw this away: .vcardousel
/* .vcardousel {
display: block;
position: relative;
width: 100%;
overflow: hidden;
width: 100%;
border-radius: 0px;
} */
Then the gap problem should have units, for example px ~ gap: 5px;. Or you just throw it away to return to default (//gap:0;).
The vertical text problem is a bit difficult for me to explain. The point is -90deg rotation with the origin top left, you can try it with cut paper.
Well, Iām not using vcardousel anymore because even when i chose another card dimension, the text didnāt fit well on wide screen and I didnāt want to interfere with the font size because it looked good on mobile.
So for now, no vertical text.
I will add units but it did not default. My gap is there. 
Actually, I need to leave it unitless for now. When I added units the gap size changed so I will have to adjust all those translations. Whatever is glideās default unit, it works for me at the moment.
Sorry for desecrating your code. 
Lol, this is not hard to understand at all. I did enough math in school to know about rotation 
Another thing is that you try to return the translation with an increase in value per 100%, because each card has a fixed width by default. Otherwise it will make the text spacing complex again. Also translateX(calc(-100% * 5)); for six images.
Not doubt your math. I have a hard time explaining it. Itās better if you just try it with some of the parameters that are already in my code. Itās your turn to explain to me if you succeeded. 
ohhh, this is good to know. I didnāt want to make you work even harder so I just did it by trial and error until all the pictures looked nice in the mobile view.
Now that I understand this better, I will use translateX(calc(-100% * 14)); and see if it goes well with 100% intervals.
lol, ok. In this case, the -90 degrees written in your code was enough explanation.
Since I didnāt want to change the text size, I just used the default card text but I will try the new translation and see if it fixes itself.
1 Like
It still became progressively offset from center using the original code but for translateX(calc(-100% * 14));
How do you keep it in the center?
In mine it is full width. Looks like you are missing this code:
.mobile-layer #main-root:has(.cardousel) [data-testid="card-image"] {
height: 300px;
}
1 Like
I added it. Still had to adjust the translation but thatās ok. It looks good. 
1 Like
@Sekayi_Liburd, I just remembered you placed your cardousel in a 3 column container. I provide code to set the container size (full, 1:1 and 3 column) which will affect the size of your frame. For mobile it is not necessary.
/*Frame in container size*/
.desktop [data-testid="wire-component-stack"]:has(.cardousel) .container-padding-md,
.desktop [data-testid="wire-component-stack"]:has(.cardousel) .oneToOne > *, .desktop [data-testid="wire-component-stack"]:has(.cardousel) .threeColumns > * {
width: 460px;
}
1 Like
Ok, Iāll try it. I was using 4 columns actually.
It looks even better! Better fit for the text too.
You just have to change the selector; for example from .threeColumns to .fourColumns.
However, keep in mind that this doesnāt necessarily mean that you can enlarge beyond the minmax limit in the grid rules. In general, the greater the number of columns, the smaller the size.
1 Like