RTL Carousel Bug

[morteza]

Details by H. Ghodsifar:

When new slide appears, it enters from the left but the current one doesn't exit from the right side, instead it goes back and exit from the left, and you can see the white background when slides are changing.

[morteza]

It’s a little tricky. The bug is known for several months. Here is the description of why this issue happens:

To make ease-in-out left transition work in RTL, I’ve forced used CSS transition: 0.6s ease-in-out right. Otherwise (for example the ease-in-out left) it won’t even transit in RTL direction and change the image suddenly. You can check that by changing it to the left (in bootstrap-rtl.css file). It’s something which is already missed in the browsers and the bug has be filed for at least Chrome and Safari.

Possible solutions:

1. You can override this transition to a more appropriate one from the very long list of transitions in CSS3.
2. You can always set a background for .carousel-inner class to make its background more beautiful and matching to the rest of the UI/UX.
3. use owl-carousel library. It seems much more feature-full than embed carousel of bootstrap. You can find it easily over the net. It’s also easy to use.
4. It has to be some javascript tricks to solve it, but I always tried to get distance from bootstrap's javascripts. I will do it this time for 3.2.0.

Cheers,
Morteza