Skip to main content
K
karpiyon
Inspiring
April 15, 2019
Answered

Smooth fade transition in bootstrap modal carousel

  • April 15, 2019
  • 1 reply
  • 4124 views

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!

This topic has been closed for replies.
Correct answer Nancy OShea

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

...

<div class="masonry">  

<!--begin dynamic gallery--> 

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


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.

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 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
K
karpiyonAuthor
Inspiring
April 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?

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 16, 2019

Use the Bootstrap cards layout you have now.

But use Fancybox as your image viewer.

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices