CODEWITHSUNDEEP
jquerytwitter-bootstrapcarousel
Jorge Sampayo
Jorge Sampayo

Reputation: 868

Twitter Bootstrap Carousel slide to a specific index but passing through the intermediate ones?

Currently I have made my carousel to slide through index boxes like this:

http://50.21.181.12:3000/

But I would like that if you are in slide 1 and click box 4, the two intermediate slides pass a lot faster to end in slide 4, like this slider:

http://www.hbs.edu/Pages/default.aspx

It is there any workaround for the carousel of twitter-bootstrap?

Any help will be highly appreciated!

Upvotes: 3

Views: 938

Answers (2)

TrippLamb
TrippLamb

Reputation: 1619

I know this is an old post, but the chosen answer isn't correct. You can edit the speed at which it slides by setting the css with javascript.

var item = $('.carousel-inner .item')
$(item).css('-webkit-transition', '0.6s ease-in-out left');
$(item).css('-moz-transition', '0.6s ease-in-out left');
$(item).css('-o-transition', '0.6s ease-in-out left');
$(item).css('transition', '0.6s ease-in-out left');

The above is the actual css that the carousel is using by default simply change the values.

Edit: In order to make it slide through the in between slides

slideTo(begin, end);

function slideTo(start_index, end_index){
    this.sliding = true;
    if(start_index != end_index) {

        var diff = start_index - end_index;
        var speed = 0.6/(Math.sqrt(Math.abs(diff))*1.5);


        var item = this.$('.carousel-inner .item')
        this.$(item).css('-webkit-transition', speed + 's linear left');
        this.$(item).css('-moz-transition'   , speed + 's linear left');
        this.$(item).css('-o-transition'     , speed + 's linear left');
        this.$(item).css('transition'        , speed + 's linear left');

        var that = this;

        if(diff < 0){
            this.$('.carousel').one('slid', function(){
                that.slideTo(start_index+1, end_index);
                return false;
            });
            this.$('.carousel').carousel(start_index+1);
        }
        else{
            this.$('.carousel').one('slid', function(){
                that.slideTo(start_index-1, end_index);
                return false;
            });
            this.$('.carousel').carousel(start_index-1);
        }
    }
    else{
        this.sliding = false;
        var item = this.$('.carousel-inner .item')
        this.$(item).css('-webkit-transition', '0.6s ease-in-out left');
        this.$(item).css('-moz-transition', '0.6s ease-in-out left');
        this.$(item).css('-o-transition', '0.6s ease-in-out left');
        this.$(item).css('transition', '0.6s ease-in-out left');
    }
}

This recursively calls itself and increments one slid closer. It currently bases the speed it slides based on the distance the current slide is from the target one.

Upvotes: 2

merv
merv

Reputation: 76700

No.

The Bootstrap Carousel visual presentation (including the animation) is CSS-based. The JavaScript merely toggles CSS classes. In order to achieve the type of sliding you're looking for, it would require a re-architecting of the core of the visual presentation, not merely a simple modification or workaround.

My recommendation would be to find a different jQuery carousel.

Upvotes: 1

Related Questions