Smooth fade transition in bootstrap modal carousel

Report · Apr 15, 2019

Hi,

I created bootstrap modal carousel which contains images of various width and height.

The problem is that the transition of the images is not smooth.

This is the sample page where i also added, in css:

#myAutoGallery .carousel-item {

transition: transform 1s ease, opacity .75s ease-out;

}

I also placed the carousel in the middle of the page as well as some color modifications

This only make the fade last longer but transition is still very jumpy for different size images.

How can make the transition smooth?

Sample page:

DnD-Production

Thank you!

Report · Apr 15, 2019

This Bootstrap approach is only good for same sized images. Sorry.

For what you want, Fancybox 3 would be a better choice. I posted an example in Reply #8 of your other thread.

Re: Turn thumbnail link to carousel and set as active.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 15, 2019

thank you

i was trying to avoid it but i'll give it a try.

Report · Apr 16, 2019

Hi,

I tried FancyBox3 but since my thumbnails have different size it does not look appealing.

This is how the thumbnails look in fancybox:

and this is in bootstrap since bootstrap thumbs are responsive:

this brings me back to the transition issue.

can't i control the transition better in the bootstrap gallery?

Report · Apr 16, 2019

Use the Bootstrap cards layout you have now.

But use Fancybox as your image viewer.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2019

Thank you,

not sure how to use fancybox as the image viewer i tried to follow your previous example:

https://forums.adobe.com/thread/2613919

...

<?php

$directory = '../folder/thumbs'; //path to thumbnails

$link = '../folder/slides'; //path to full-sized images

$allowed_types = array('jpg','jpeg','png');

...

Where is "masonry class defined?

Or can i use my current bootstrap 4 masonry card layout and somehow use fancybox as the viewer as you suggested.

many thanks

Dan

Report · Apr 16, 2019

Masonry is defined in the embedded CSS of my demo page, inside the <head> tags. But you don't need to use my layout. Use your own layout. Change the parent division from masonry to whatever you're using.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2019

Thanks!

That did it

Smooth fade transition in bootstrap modal carousel

1 Correct answer

Photos