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

Question

如何将Twitter Bootstrap轮播循环函数可以更改为将项从右到左循环而不是从左到右，因此在希伯来语/阿拉伯语网站？

Answer 1

只需重写周期函数调用类似功能的上一页代替下一个：

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

使用

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

代替

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

在引导3

Answer 3

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

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

解决步骤：

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

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

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

在剃刀：

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

在JavaScript：

<script type="text/javascript"> 
     var isRTL = "@IsRTL()".toLowerCase() === 'true'; 
     $(".slideshow .pager li").css("float", isRTL ? "right" : "left"); 

     $(document).ready(function() { 
      if (isRTL) { 
       $(".slideshow-prev").click(function() { 
        $("#divTopNewsSlider").carousel('next'); 
        event.stopPropagation(); 
       }); 

       $(".slideshow-next").click(function() { 
        $("#divTopNewsSlider").carousel('prev'); 
        event.stopPropagation(); 
       }); 
      } 
     }); 

    </script> 

Answer 4

如何扭转通过CSS

的引导旋转木马我有只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); 
 
    } 
 
}

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="//placehold.it/900x300/c69/f9c/?text=1" alt="First slide"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//placehold.it/900x300/9c6/cf9/?text=2" alt="Second slide"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//placehold.it/900x300/69c/9cf/?text=3" alt="Third slide"> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 5

对于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') 
}