Bootstrap 走马灯从左向右滑动

Question

你好，我正在使用Bootstrap并创建了一个Bootstrap Carousel，但是我想让它从左到右移动。

这是我的代码，位于jsfiddle上。

在这段代码中，Carousel是从右到左移动的。

var direction = type == 'next' ? 'left' : 'right'

我将var里的左右交换了，但是出现了问题。下一张幻灯片仍从右边进入。

var direction = type == 'next' ? 'right' : 'left'

我希望你能理解我想要什么 :D

编辑:

最终我找到了答案：我编辑了 Twitter Bootstrap.css

我在 Bootstrap.css 中的 .carousel 类中交换了所有的左右位置。

- YuZA

---

我认为这是不可能的。 - ketan

永远活着是不可能的；-) - YuZA

余先生，您能分享一下您的代码吗？因为我需要相同的代码。请帮帮我。 - user6930268

http://s8.picofile.com/file/8268947992/bootstrap.css.html - YuZA

Answer 1

你可以尝试更改.carousel-control HTML代码。

data-slide="prev"
data-slide="next"

to

data-slide="next" 
data-slide="prev"     

:)

- Ray Magini

---

他不需要点击。他只需要从左到右移动走马灯。 - ketan

非常感谢！这解决了我的问题。 :) - Blue Tram

Answer 2

仅使用CSS的Bootstrap走马灯（从右到左，RTL）

HTML:

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

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="..." alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            <div class="item">
              <img src="..." alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            ...
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

CSS：

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

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

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

- ardalanSh

Answer 3

我还修改了.bootstrap css以实现这种效果。我没有在css中将所有的左侧替换为右侧，而是修改了inner_carousel类中的这一行：

"6s ease-in-out left;" 改为 "6s ease-in-out right;"

此外，我还交换了inner_carousel类的所有子类中对"100%"的调用，将"100%"改为"-100%"。

- Caro

---

我忘了提到100%和-100%的变化只涉及方向元素，比如inner_carousel的“next、prev、left和right类”，而不是宽度。 - Caro

Answer 4

在Bootstrap v3.3.7中找到'bootstrap.js'文件。

现在，找到这段代码：

var delta = direction == 'prev' ? -1 : 1;

将其更改为：

var delta = direction == 'prev' ? 1 : -1;

然后，找到这些行：

Carousel.prototype.next = function () {
    if (this.sliding)
        return
    return this.slide('next');
}

Carousel.prototype.prev = function () {
    if (this.sliding)
        return
    return this.slide('prev');
}

并将其更改为：

Carousel.prototype.next = function () {
    if (this.sliding)
        return
    return this.slide('prev');
}

Carousel.prototype.prev = function () {
    if (this.sliding)
        return
    return this.slide('next');
}

- ahmadreza sadafi