Twitter Bootstrap Carousel cycle items right to left ( RTL ) reversed

Question

How can the Twitter Bootstrap Carousel cycle function can be changed to cycle the items from right to left instead of left to right so it'll look normal in hebrew/arabic websites?

Answer 1

Just override the cycle function with a similar function that calls prev instead of 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

How to reverse the Bootstrap carousel by CSS

I have a solution by CSS only. No new scripts. No alteration of the HTML.

1. Make the images wide and responsive.
2. Change the order of the indicators. Return them to the center of the slide.
3. Change the direction of the transition.

Please check the result:

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

For RTL Languages such as Persian, Arabic and Hebrew

In the bootstrap.js file, find & change these lines:

var delta = direction == 'prev' ? -1 : 1

to:

var delta = direction == 'prev' ? 1 : -1

also

Carousel.prototype.next = function () {
    if (this.sliding) return
    return this.slide('next')
}
Carousel.prototype.prev = function () {
    if (this.sliding) return
    return this.slide('prev')
}

to:

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

I did a different thing, was too lazy to stick to your solution (too verbose for me):

My settings: ASP.NET MVC, culture settings: Hebrew. My carousel instance sits under a div named "divTopNewsSlider". ".slideshow-prev" and ".slideshow-next" are the selectors for my prev and next icons.

Solution steps:

1. Determine the user's culture (I develop for a Content Management System, so I need to get the culture settings from the server).

2. Use it to determine the float direction of the carousel li elements.

3. Change the carousel slider's next and prev functionalities to their reverse, respectively.

In Razor:

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

In 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

use

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

instead of

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

in bootstrap 3