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?

Liver

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

Liver

for me wasn't working, probably because of different bootstrap versions. mine worked with var carousel = $(this).data('bs.carousel'); – Alienage

Now how to invert the indicators? – Alienage

Its working for me, but the interval stop responding to the property that I sent e.g. $('#carousel').carousel({ interval: 500 }); – Awlwort

I'm tempted to suggest an extension of the carousel rather than just overriding its cycle method. You could just create a ReversibleCarousel for example and provide an additional method that did the same thing as your override does, but leaves the normal cycle method in place for later calls. – Pacific

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>

Intromit

its does not work if you are sliding using the "carousel-indicators" – Belinda

@Belinda Thank you for feedback! But please explain one more time what do you mean. I've changed the order of indicators. Now it's (3) (2) (1) instead of (1) (2) (3). – Intromit

Lets say there is no interval defined or its very long so when some one click on second or 3rd round circle from the left side, the slide should enter the screen from left side and go to right side. – Belinda

all i want to say is that the right arrow is doing its job well . ( bringing the slide from left to right) but the circles when clicked one by one from left to right are bringing slides from right to left and once circles clicked one by one from right to left they do are doing fine. when ever any circle clicked the slide should enter from left to right. – Belinda

@Belinda Thanks for the clarifications! I think you are describing the behavior of the standard Bootstrap carousel. My code is just a mirror for the default carousel. But reflection can't correct deficiencies. – Intromit

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

Calabrese

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>

Unhandsome

Answer 5

use

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

instead of

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

in bootstrap 3

Megara

How about explaining why? – Kempe

Is this an improvement of my answer? You should write it as a comment on my answer and not as a different answer. – Liver