Adam Tal Adam Tal - 1 year ago 139
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;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download