[css] carousel buttons error in RTL
Created by: Mohamed-Anes
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
In RTL bootstrap carousel, prev and next buttons have inverted functions, prev takes to next and next takes to previous. It can be seen in the official bootstrap rtl carousel example
Reduced test cases
https://getbootstrap.com/docs/5.2/examples/carousel-rtl/
The fix I found is inverting the 'translateX()' values in the bootstrao.rtl.css file (and by extension other files using the same css code)
--Code before change:
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
transform: translateX(-100%);
}
--Code after change:
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(-100%);
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
transform: translateX(100%);
}
This section of code begins in the file bootstrap.rtl.css at line 5847 as of the current version https://github.com/twbs/bootstrap/blob/d0117a17d807df05dfd6f6ce72a0d63f081ca529/dist/css/bootstrap.rtl.css#L5847
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.0.2