Friday 30 May 2014

Bootstrap Touch Carousel cycle option

Here is the way you can enable infinite cycling on Bootstrap touch carousel. ( https://github.com/ixisio/bootstrap-touch-carousel )

Step 1: Find the below function in bootstrap-touch-carousel.js file.

g.prototype._showPane = function(a) { 
        this.$items.eq(this.current_pane).toggleClass("active"), a >= this.pane_count && this.pause(), a = Math.max(0, Math.min(a, this.pane_count - 1));
        this.$items.eq(a).toggleClass("active");
        this.current_pane = a;
        var b = -(100 / this.pane_count * this.current_pane);
        return this._setContainerOffset(b, !0, a), this
    }

 

Step 2: Add the below if condition as first line inside the function.

if(a === this.pane_count){ a = 0; }

 Final Code:

g.prototype._showPane = function(a) {      

        if(a === this.pane_count){a = 0;}
        this.$items.eq(this.current_pane).toggleClass("active"), a >= this.pane_count && this.pause(), a = Math.max(0, Math.min(a, this.pane_count - 1));
        this.$items.eq(a).toggleClass("active");
        this.current_pane = a;
        var b = -(100 / this.pane_count * this.current_pane);
        return this._setContainerOffset(b, !0, a), this
    }

 

Thats it. I've tested it on all touch devices and its working fine.