[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