Bootstrap carousel从左到右滑动

Hi i using bootstrap and created bootstrap carousel but i want it move from left to the right

嗨我使用bootstrap并创建了bootstrap轮播,但我希望它从左向右移动

this is my code on jsfiddle

这是我在jsfiddle上的代码

on this code carousel move from right to the left

在此代码轮播从右向左移动

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

i changed right and left in var but there is a problem. next slide come in from right again

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

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

I hope you understand what i want :D

我希望你明白我想要的东西:D

EDIT:

Finally I found the answer: I edited the twitter bootstrap.css

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

I Xchanged all left and right in .carousel class in bootstrap.css

我在bootstrap.css中的.carousel类中左右移动了所有内容

4 个解决方案

#1

Bootstrap carousel by CSS only (right to left, RTL) HTML:

仅限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);
              }
            }

#2

You can try to change in .carousel-control html code

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

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

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

#3

I also altered the .bootstrap css to achieve this effect. Instead of exchanging all lefts to rights in the css, I altered this line in the inner_carousel class:

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

"6s ease-in-out left;" to "6s ease-in-out right;"

“6s轻松进出;”到“6s轻松进出;”

Additionally, I swapped any calls of "100%" to "-100%" and "100%" to "-100%" in all child classes of the inner_carousel class.

另外,我在inner_carousel类的所有子类中将“100%”的任何调用交换为“-100%”和“100%”到“-100%”。

#4

In the Bootstrap v3.3.7 find the 'bootstrap.js' file

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

Now, find this code :

现在,找到这段代码:

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

change it to :

将其更改为:

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

Then, find these lines :

然后,找到这些行:

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

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

and change that to :

并将其更改为:

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

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

#1