Bootstrap: Bootstrap Carousel Slide Motion Glitch(on the time of motion)

[rupinderjeet]

I am able to play carousel, My problem is in _how carousel loads slides of different sizes_

Download following .txt file, change its extension to .html and run it in chrome(you must have internet for cdn links).

problem.txt

Suppose First slide's height is 100px, same for second slide, but third slide has a height of 200px.

In this HTML file, when you click 'third' button, the third slide is loaded. but while changing slide, it is shown half. After slide motion is done/complete, it shows full slide.

I want to do something that makes the slide to not cause this transition glitch. It must slide a complete SLIDE PAGE. For now, It shows some part of moving third slide, and loads rest of part after slide has stopped moving.

Same question is posted on StackOverfow by me. You can visit it in here.

[RyanZim]

Same problem in Firefox.

[ahtee]

try adding this to the css:

.carousel .item { height: 260px; }

works in safari and chrome for me

[rupinderjeet]

What about lengthy slides? Suppose you have one image to load in first slide, 10 in second, 100 in third. You are not understanding the main problem, you're just solving the given html code.

Your method wouldn't work if the content of a slide is dynamic/database-dependent.

[RyanZim]

@rupinderjeet, you're right. One think to keep in mind: if you have content below your carousel and you don't set .carousel .item's height, the content below will "jump" when the slide's height changes.

[ahtee]

I dont think it's a bug with bootstrap. It's just an issue of having different size slides and loading them before they are rendered

[rupinderjeet]

problem - v2.txt

@RyanZim tried that. It does look bad to have different sized slides. But, i am not using it as a slide show. I am using it as a Division Block that changes according to clicked Menu Item.

[rupinderjeet]

@ahtee its a visual glitch. Every slide must come in motion only when it is fully visible. Bootstrap makes web design beautiful, and this looks ugly, definitely no one wants this.

and when you say _It's just an issue,_ I suppose we all are reporting and solving issues in here.

[RyanZim]

I've confirmed this bug in:

• Chrome
• Firefox
• IE
• Safari
• Opera

I was first inclined to think this might be a browser rendering bug; but seeing that it's consistent across the board, I can hardly think that all browsers would have this limitation.

[cvrebert]

Folks, please don't use GitHub's file upload feature. Use JS Bin / JS Fiddle / CodePen / etc. instead. Live examples like those are much more convenient and useful.

[cvrebert]

Duplicate of #18565.

[rupinderjeet]

problem.v3.jsfiddle

@cvrebert I have added new css class .carousel-overflow and used it in html like this carousel-inner carousel-overflow. It makes the motion glitch go away. But, Now there is a new problem on the very-bottom horizontal-scroll-bar. When you click 'Third' button, it appears and goes away as soon as slide motion stops.

[twbs-lmvtfy]

Hi @rupinderjeet!

You appear to have posted a live example (https://fiddle.jshell.net/rupinderjeet/rxs1wjpj/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 98, column 3 thru column 10: The center element is obsolete. Use CSS instead.
• line 102, column 3 thru column 78: Element button not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)
• line 103, column 3 thru column 78: Element button not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)
• line 104, column 3 thru column 78: Element button not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[rupinderjeet]

problem.v3.jsfiddle.validated

@cvrebert I have added new css class .carousel-overflow and used it in html like this carousel-inner carousel-overflow. It makes the motion glitch go away. But, Now there is a new problem on the very-bottom horizontal-scroll-bar. When you click 'Third' button, it appears and goes away as soon as slide motion stops.

Update.v1
Following Image shows that setting overflow-x: hidden and overflow-y: visible makes the initial problem of motion-glitch appear again.

[cvrebert]

For questions regarding custom code, please ask on StackOverflow instead of here.

[rupinderjeet]

I did. Again and Again, I did. No Answers. See here