[css] carousel buttons error in RTL

[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

bootstrap/dist/css/bootstrap.rtl.css

Line 5847 in d0117a1

.carousel-item-next:not(.carousel-item-start),

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

[ffoodd]

What do you expect exactly?

RTL carousel first item is on the right and the last on the left, next button is on the left and prev on the right. I think that's the intended behavior for this feature. Am I missing something?

[Mohamed-Anes]

@ffoodd, if you compare the carousel examples (the normal one with the RTL one), you see that

• in the normal: pressing the left button takes you to the slide on the left of the current one (all images move to the right)

• in RTL one: pressing the left button takes you to the slide on the right of the current one (all images move to the left)

• normal one: https://getbootstrap.com/docs/5.2/examples/carousel/

• RTL one: https://getbootstrap.com/docs/5.2/examples/carousel-rtl/

[ffoodd]

Aah yeah I see, in LTR translate follows arrows but in RTL it goes to the opposite.