Twitter Bootstrap Carousel循环项目从右到左(RTL)反转

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