Adam Tal Adam Tal - 1 year ago 134
jQuery Question

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

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 Source

Just override the cycle function with a similar function that calls prev instead of next:

$(document).ready(function () {

        var carousel = $(this).data('bs.carousel'); // or .data('carousel') in bootstrap 2

        // 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() {

        // 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.paused
            && (this.interval = setInterval($.proxy(this.prev, this), this.options.interval))
            return this;