jquery - Twitter Bootstrap Carousel 循环项目从右到左 (RTL) 反转

Question

如何更改 Twitter Bootstrap Carousel循环功能以从右到左而不是从左到右循环项目，以便在希伯来语/阿拉伯语网站中看起来很正常？

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

<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="https://via.placeholder.com/900x300/c69/f9c/?text=Right%20To%20Left" alt="First slide">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="Second slide">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/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 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”是我的上一个和下一个图标的选择器。

解决步骤：

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

2. 使用它来确定轮播 li 元素的浮动方向。

3. 将轮播滑块的 next 和 prev 功能分别更改为反向。

在剃刀中：

@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 5

利用

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

代替

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

在引导程序 3