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

[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.

[Pablo]

The pause time, specifies the time the slide pauses between different slides.
There is no option to control the transition.

[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?

[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.

[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.

[Pablo]

I'm sorry, it not clear to me what you are trying to do.

Can you please provide a DEMO?

[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.

[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

[Pablo]

There is currently no fade animation for the card container.
But did you consider using the standard carousel object instead?

[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.

[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!

[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.

[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.