Twitter Bootstrap Carousel скользит по определенному индексу, но проходит через промежуточные?

В настоящее время я заставил свою карусель скользить по индексным полям следующим образом:

http://50.21.181.12:3000/

Но я бы хотел, чтобы, если вы находитесь на слайде 1 и щелкаете поле 4, два промежуточных слайда проходили намного быстрее и заканчивались слайдом 4, как этот слайдер:

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

Есть ли обходной путь для карусели twitter-bootstrap?

Любая помощь будет высоко оценена!


carousel jquery twitter-bootstrap
person Jorge Sampayo    schedule 29.10.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я знаю, что это старый пост, но выбранный ответ неверен. Вы можете изменить скорость, с которой он скользит, установив css с помощью 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');

Выше приведен фактический css, который карусель использует по умолчанию, просто измените значения.

Изменить: чтобы заставить его скользить между слайдами

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

Это рекурсивно вызывает себя и увеличивает на один шаг ближе. В настоящее время скорость скольжения зависит от расстояния текущего скольжения от целевого.

person QuantumDebris    schedule 06.06.2013
comment
Спасибо за ваш вклад, но, вероятно, это неправильное понимание, я хотел (в то время), что если вы находитесь на слайде 1 и щелкаете слайд 5, карусель показывает слайд между слайдами 1,2,3,4 и 5 , а не только от 1 до 5. В целом, ваш ответ ценен, потому что с этим CSS он может быть полезен для выполнения этого вручную с помощью некоторого взлома в JS. - person Jorge Sampayo; 12.06.2013
comment
Вы правы, я не понял, где у вас возникла проблема. Первоначально я просто исправлял исходный ответ, потому что он был неправильным, и я подумал, что это может помочь кому-то вроде меня искать, как это сделать в будущем. Ответ обновлен. - person QuantumDebris; 18.06.2013
comment
Спасибо за ваш вклад! Надеюсь, это поможет кому-то - person Jorge Sampayo; 20.06.2013
comment
Где определен метод slidHelper()? - person merv; 30.06.2013
comment
Упс. Это не так. Вам это не нужно. Я скопировал и вставил из своего собственного кода, все, что он сделал, это некоторые стили. Я отредактировал ответ без двух вызовов этой функции. - person QuantumDebris; 02.07.2013

arrow_upward
1
arrow_downward

Нет

Визуальное представление Bootstrap Carousel (включая анимацию) основано на CSS. JavaScript просто переключает классы CSS. Чтобы достичь желаемого типа скольжения, потребуется перепроектирование ядра визуальной презентации, а не просто простая модификация или обходной путь.

Я бы порекомендовал найти другую карусель jQuery.

person merv    schedule 11.12.2012