Bootstrap JS 3轮播从左到右旋转

Question

我正在使用 bootstrap 3 carousel 来旋转横幅上的图像。 是否有任何属性可以添加到我的代码中以强制幻灯片被翻转 RTL 或 LTR？如果不是，怎么可能做到？这是我的代码：

    $('.carousel').carousel({
         interval: 3000,
         pause: "hover",
    });

Answer 1

没有option 可以改变引导轮播的方向。

你必须自己做。您可以通过在您的代码之前运行此代码来覆盖 Bootstrap 的功能。

$.fn.carousel.Constructor.prototype.next = function () {
  if (this.sliding) return;
  return this.slide('prev');
};

$.fn.carousel.Constructor.prototype.prev = function () {
  if (this.sliding) return;
  return this.slide('next');
};

但要小心，它会改变页面上所有轮播的方向，并且控件会反转。

Answer 2

如何通过 CSS 类控制 Bootstrap 轮播

您可以自行定义 CSS 类并将它们分配给您的轮播。 例如：

1. .wide-and-responsive 类使图像宽且响应迅速。
2. .rtl 类改变了过渡的方向。
3. .rtl-indicators 类更改指标的顺序。
4. 您还可以将所有这些属性设置在一起，例如in this answer。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Make the images wide and responsive. */
.wide-and-responsive img {
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* Change the direction of the transition. */
@media all and (transform-3d), (-webkit-transform-3d) {
  .rtl .item.next,
  .rtl .active.right {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  .rtl .item.prev,
  .rtl .item.active.left {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

/* Change the order of the indicators. Return them to the center of the slide. */
.rtl-indicators .carousel-indicators {
  width: auto;
  margin-left: 0;
  transform: translateX(-50%);
}
.rtl-indicators .carousel-indicators li {
  float: right;
  margin: 1px 4px;
}
.rtl-indicators .carousel-indicators .active {
  margin: 0 3px;
}

<div class="container">

<h1>How to control Bootstrap carousels by CSS classes</h1>

<h2><span class="label label-default">.wide-and-responsive</span> makes the images wide and responsive</h2>
<div id="carousel-1" class="carousel slide wide-and-responsive" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="//placehold.it/600x150/c69/f9c/?text=1" alt="First slide">
    </div>
    <div class="item">
      <img src="//placehold.it/600x150/9c6/cf9/?text=2" alt="Second slide">
    </div>
    <div class="item">
      <img src="//placehold.it/600x150/69c/9cf/?text=3" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
  <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

<h2><span class="label label-default">.rtl</span> changes the direction of the transition</h2>
<div id="carousel-2" class="carousel slide rtl" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-2" data-slide-to="1"></li>
    <li data-target="#carousel-2" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="//placehold.it/600x150/c69/f9c/?text=1" alt="First slide">
    </div>
    <div class="item">
      <img src="//placehold.it/600x150/9c6/cf9/?text=2" alt="Second slide">
    </div>
    <div class="item">
      <img src="//placehold.it/600x150/69c/9cf/?text=3" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-2" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
  <a class="right carousel-control" href="#carousel-2" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

<h2><span class="label label-default">.rtl-indicators</span> changes the order of the indicators</h2>
<div id="carousel-3" class="carousel slide rtl-indicators" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-3" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-3" data-slide-to="1"></li>
    <li data-target="#carousel-3" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="//placehold.it/600x150/c69/f9c/?text=1" alt="First slide">
    </div>
    <div class="item">
      <img src="//placehold.it/600x150/9c6/cf9/?text=2" alt="Second slide">
    </div>
    <div class="item">
      <img src="//placehold.it/600x150/69c/9cf/?text=3" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-3" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
  <a class="right carousel-control" href="#carousel-3" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

<h2>All together now</h2>
<div id="carousel-4" class="carousel slide wide-and-responsive rtl rtl-indicators" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-4" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-4" data-slide-to="1"></li>
    <li data-target="#carousel-4" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="//placehold.it/600x150/c69/f9c/?text=1" alt="First slide">
    </div>
    <div class="item">
      <img src="//placehold.it/600x150/9c6/cf9/?text=2" alt="Second slide">
    </div>
    <div class="item">
      <img src="//placehold.it/600x150/69c/9cf/?text=3" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-4" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
  <a class="right carousel-control" href="#carousel-4" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 3

/* Change the direction of the transition. Left To Right in **bootstrap4 by css Only***/

@media all and (transform-3d), (-webkit-transform-3d) {
    .active.carousel-item-left, .carousel-item-prev:not(.carousel-item-right) {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    .active.carousel-item-right, .carousel-item-next:not(.carousel-item-left) {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}