滑块不适用于 Bootstrap-RTL答案

【问题标题】：Slider is not working with Bootstrap-RTL滑块不适用于 Bootstrap-RTL
【发布时间】：2022-02-21 03:42:25
【问题描述】：

当我使用正常的引导 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     -->

【问题讨论】：

您使用的是两者的最新版本吗？
@Spokey 是的，我同时从同一个 git 下载了两者。
@Unknownman 我不确定小提琴是什么。我从哪里得到它？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

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

这将改变轮播方向

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

【讨论】：

【解决方案2】：

你应该首先做一个条件，只在你需要的语言上加载引导 rtl。然后通过这些更改自定义样式，请确保仅在需要时调用此自定义样式，因为会导致您与 ltr 不兼容。

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

【讨论】：

【解决方案3】：

你应该使用这个代码。

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

【讨论】：