如何通过CSS

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。

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

请检查结果：

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 3

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

在bootstrap.js文件中，找到＆amp;改变这一行：

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”是我的上一个和下一个图标的选择器。

解决方案步骤：

确定用户的文化（我为内容管理系统开发，所以我需要从服务器获取文化设置）。
用它来确定旋转木马li元素的浮动方向。
分别将轮播滑块的下一个和上一个功能更改为反向。

在剃刀中：

@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');

在bootstrap 3中

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

5 个答案:

如何通过CSS