滑块无法与 Bootstrap-RTL 一起使用

Question

当我使用正常的 bootrap css 加载滑块时，它工作得很好：

<link rel="stylesheet" href="css/bootstrap.min.css">

但是当我使用 rtl css 文件加载它时 - 照片正在更改，但幻灯片动画由于某种原因无法正常工作

<link rel="stylesheet" href="css/bootstrap-rtl.min.css">

我正在使用原始引导程序存储库中的 RTL 文件。

我的滑块：

    <!-- My Carousel     -->   
     <div id="carousel-example" class="carousel slide">

            <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example" data-slide-to="1"></li>
            <li data-target="#carousel-example" data-slide-to="2"></li>
          </ol>

            <!-- Wrapper for slides -->
          <div class="carousel-inner">

                    <div class="item active">
                              <img src="gallery/img1.jpg" alt="IMG1">
                              <div class="carousel-caption" >  סלייד ראשון .   <button  type="button" class="btn btn-primary  btn-sm ">לפרטים</button>  </div>

                    </div>

                    <div class="item ">
                              <img src="gallery/img2.jpg" alt="IMG2">
                              <div class="carousel-caption">  סלייד שני .   </div>
                    </div>

                    <div class="item ">
                            <img src="gallery/img3.jpg" alt="IMG3">
                           <div class="carousel-caption">  סלייד שלישי ואחרון .   </div>
                  </div>

          </div>

     </div><!-- End of My Carousel     -->   

Answer 1

您需要做的就是编辑轮播容器方向

<style>
#carousel_container, #or_beyond_the_container_if_needed {
direction: ltr;
}
</style>

这将改变轮播方向

注释：该解决方案适用于任何轮播或滑块

Answer 2

您应该使用此代码。

.carousel-control-prev{
    right:auto;
}
.carousel-item {
    margin-left: 0;
}

Answer 3

您应该首先执行一个条件，仅在您需要的语言上加载 bootstrap rtl。 然后使用这些更改创建自定义样式，请确保仅在需要时才调用此自定义样式，因为这会导致您与ltr不兼容。

   .carousel-item {
        margin-right: initial;
    }
    .carousel-control-next {
        right: initial;
    }

Answer 4

我通过放入此代码来修复它，或者您可以将其添加到 css 样式文件中，但删除和标记

.carousel-item {
        margin: 0px;
        padding: 0px;
    }
 .carousel-control-prev,.carousel-control-next {
    flex: 0 0 auto;
}

.carousel-control-prev {
    margin-right: auto;
}

.carousel-control-next {
    margin-left: auto;
}