本文介绍了引导轮旋转从左到右滑动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用引导程序并创建了引导程序轮播,但我希望它从左向右移动
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); } }更多推荐
引导轮旋转从左到右滑动
发布评论