Question

您好我使用bootstrap并创建了bootstrap carousel，但我希望它从左向右移动

这是我在jsfiddle

上的代码

此代码轮播从右向左移动

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

我在var中左右改变但是有问题。下一张幻灯片再次从右侧进入

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

我希望你明白我的意思：D

编辑：

最后我找到了答案：我编辑了twitter bootstrap.css

我在bootstrap.css

中的.carousel类中左移和右移

Answer 1

仅限CSS的Bootstrap轮播（从右到左，RTL） HTML：

JPanel

CSS：

        <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>

Answer 2

您可以尝试更改.carousel-control html代码

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

到

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

：）

Answer 3

我还改变了.bootstrap css来实现这种效果。我没有在css中交换所有权限，而是在inner_carousel类中更改了这一行：

＆＃34; 6s轻松进出;＆＃34;到＆＃34; 6s轻松进出;＆＃34;

此外，我更换了＆＃34; 100％＆＃34;至＆＃34; -100％＆＃34;和＆＃34; 100％＆＃34;至＆＃34; -100％＆＃34;在inner_carousel类的所有子类中。

Answer 4

在Bootstrap v3.3.7中找到＆＃39; bootstrap.js＆＃39;文件

现在，找到这段代码：

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');
}

Bootstrap carousel从左到右滑动

4 个答案: