Page 1 of 1

Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 8:42 am
by AliGW
Is it possible to slow down the transition time in the carousel? The pause time has a setting, but I see nothing for the transition. Also, is it possible to change the style of the transition from slide to fade?

PS How do I add padding to the top of a card container? And why, when I add a card using the blue button, does it place the new card below the card container and not inside it?

Thank you.

Re: Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 8:59 am
by Pablo
The pause time, specifies the time the slide pauses between different slides.
There is no option to control the transition.

Re: Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 9:05 am
by AliGW
In that case, is it possible to add it as a feature request, please? Is there no way to add code to slow the transition?

Did you see the questions on my PS?

Re: [SOLVED - NOT POSSIBLE] Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 10:16 am
by Pablo
The card contains uses OWL carousel.

You can use this code to container the transition duration:

Code: Select all

<style>
.owl-stage
{
   transition: 5.25s !important;
}
</style>
You can add padding via the padding properties.
But you can also add margin to the top of the cards.

Re: [SOLVED - NOT POSSIBLE] Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 10:25 am
by AliGW
Thank you. Unfortunately, this doesn't give the effect I was hoping for. I wanted to mimic the effect of a looping slider.

I already have the FlexSlider which works almost perfectly for what I want. The only thing it doesn't do (and I have tried every combination of settings) is properly honour the dimensions and aspect ratio of each photo. By using the card container and carousel, I am able to specify the maximum width of the image in each card, which produces the results I want and the responsiveness I was hoping for. What I don't seem able to have with the card container are the fade transition from card to card Perhaps I shluld be looking at a card stack instead? I shall keep on playing with the options.

Thanks again for the suggestion. :D

Re: [SOLVED - NOT POSSIBLE] Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 10:29 am
by Pablo
I'm sorry, it not clear to me what you are trying to do.

Can you please provide a DEMO?

Re: [SOLVED - NOT POSSIBLE] Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 10:32 am
by AliGW
I am not sure that a demo will help as the demo won't show what I want.

However, I'll put something together later (I don't have time at the moment to do so). The carousel gets me to within 95% of what I want.

Thanks.

Re: Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 11:32 am
by AliGW
So the link contains a .wbs file with two pages in a gallery folder (2024). There is also a folder of images.

I have added notes to each of the two pages - you need to preview the two pages in a browser to see the differences that I have described.

What I am after is the Card Container with Carousel's sizing and responsiveness with the FlexSlider's slow fade transisitons.

I realise that this may not be possible.

Thanks.

https://we.tl/t-5iTqLfvKEf

Re: Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 12:34 pm
by Pablo
There is currently no fade animation for the card container.
But did you consider using the standard carousel object instead?

Re: Card Container with Carousel: How to Slow Down the Transition?

Posted: Wed Jan 29, 2025 1:04 pm
by AliGW
No, but I'll have a look and see if I can make it do what I want.

EDIT: I am going to need to read up on carousels, as I have tried placing one both on a page and inside a layout grid, and nothing showqs up (not even any default navigation). I must be doing something wrong. I'll look again another day.

Re: Card Container with Carousel: How to Slow Down the Transition?

Posted: Fri Feb 14, 2025 2:25 pm
by AliGW
@Pablo

Just wanted to say 'thank you' for the fade addition to the card container object - I didn't think you'd implement it so quickly! I think the addition of the navigation squares when pagination is off is a fabulous idea, and it's going to save me some time, so thanks for that.

Might it be possible at some point in the future to have a setting to control the speed of the fade? Or is there perhaps a way to do this already?

You are a star! :)

Re: Card Container with Carousel: How to Slow Down the Transition?

Posted: Fri Feb 14, 2025 2:37 pm
by Pablo
Might it be possible at some point in the future to have a setting to control the speed of the fade?
Yes, this is possible. However, implementing this feature will require changes to both the user interface and the project format. As a result, it takes more time to develop and integrate properly.

Re: Card Container with Carousel: How to Slow Down the Transition?

Posted: Fri Feb 14, 2025 2:44 pm
by AliGW
OK - that's good to know - thank you for explaining.

I'm very happy with the fade as it is for now and have already implemented it on all of my galleries. :D