引导轮旋转从左到右滑动

本文介绍了引导轮旋转从左到右滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用引导程序并创建了引导程序轮播，但我希望它从左向右移动

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

这是我在 jsfiddle

此代码轮播从右移到左

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

我在var中左右更改，但是存在问题。下一张幻灯片再次从右进来

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

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

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

I hope you understand what i want :D

编辑：

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

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

我在bootstrap.css的.carousel类中X左右都改变了。

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

推荐答案

Bootstrap轮播仅通过CSS（从右到左，RTL） HTML：

Bootstrap carousel by CSS only (right to left, 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); } }