Question

目前我已经让我的旋转木马滑过这样的索引框：

http://50.21.181.12:3000/

但我想如果你在幻灯片1中并点击框4，那么两个中间幻灯片会更快地通过幻灯片4结束，就像这个滑块一样：

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

对于twitter-bootstrap的轮播有什么解决方法吗？

任何帮助都将受到高度赞赏！

Answer 1

我知道这是一篇旧帖子，但所选答案并不正确。您可以通过使用javascript设置css来编辑它滑动的速度。

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

这递归地调用自身并递增一个滑动更近。它目前基于当前幻灯片距目标幻灯片的距离来确定其滑动速度。

Answer 2

否

Bootstrap Carousel视觉演示（包括动画）是基于CSS的。 JavaScript只是切换CSS类。为了实现您正在寻找的滑动类型，需要重新构建视觉呈现的核心，而不仅仅是简单的修改或解决方法。

我的建议是找到一个不同的jQuery轮播。

Twitter Bootstrap Carousel滑动到特定索引但是通过中间索引？

2 个答案: