Twitter Bootstrap Carousel循环项目从右到左（RTL）反转

如何改变Twitter Bootstrap Carousel 循环function以从右到左而不是从左到右循环项目，这样在希伯来语/阿拉伯语网站中看起来是正常的？

Answer 1

只需使用调用prev而不是next的类似函数覆盖循环函数：

$(document).ready(function () { $('.carousel').each(function(){ $(this).carousel(); var carousel = $(this).data('bs.carousel'); // or .data('carousel') in bootstrap 2 carousel.pause(); // At first, reverse the order of the items in the carousel because we're moving backwards $(this).find('> .carousel-inner > .item:not(:first-child)').each(function() { $(this).prependTo(this.parentNode); }); // Override the bootstrap carousel prototype function, adding a different one won't work (it'll work only for the first slide) carousel.cycle = function (e) { if (!e) this.paused = false if (this.interval) clearInterval(this.interval); this.options.interval && !this.paused && (this.interval = setInterval($.proxy(this.prev, this), this.options.interval)) return this; }; carousel.cycle(); }); }); 

Answer 2

如何通过CSS反转Bootstrap轮播

我只有CSS的解决方案。 没有新的脚本。 没有改变HTML。

1. 使图像更宽广，反应灵敏。
2. 更改指标的顺序。 将它们放回幻灯片的中心。
3. 改变过渡的方向。

请检查结果：

jsfiddle codepen bootply

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); /* 1 */ #myCarousel img { height: auto; max-width: 100%; width: 100%; } /* 2 */ .carousel-indicators { width: auto; margin-left: 0; transform: translateX(-50%); } .carousel-indicators li { float: right; margin: 1px 4px; } .carousel-indicators .active { margin: 0 3px; } /* 3 */ @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); } } 

 
 
 
 
 
 
 
 
  
 
  
 
  
 
 Previous Next 
   

Answer 3

对于RTL语言，如波斯语，阿拉伯语和希伯来语

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

Answer 4

我做了一件不同的事情，懒得坚持你的解决方案（对我来说太冗长）：

我的设置：ASP.NET MVC，文化设置：希伯来语。 我的轮播实例位于名为“divTopNewsSlider”的div下。 “.slideshow-prev”和“.slideshow-next”是我的prev和next图标的选择器。

解决步骤：

1. 确定用户的文化（我为内容管理系统开发，所以我需要从服务器获取文化设置）。

2. 用它来确定旋转木马li元素的浮动方向。

3. 分别将轮播滑块的下一个和上一个function更改为相反的function。

在剃刀：

 @functions { Boolean IsRTL() { return this.CultureDictionary.Language.CultureAlias.ToLower().IndexOf("he-il") > -1; } } 

在JavaScript中：

Answer 5

使用

 var carousel = $(this).data('bs.carousel'); 

代替

 var carousel = $(this).data('carousel'); 

在bootstrap 3