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

【问题标题】：Twitter Bootstrap Carousel slide to a specific index but passing through the intermediate ones?Twitter Bootstrap Carousel 滑动到特定索引但通过中间索引？
【发布时间】：2012-10-29 17:24:49
【问题描述】：

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

http://50.21.181.12:3000/

但我希望，如果您在幻灯片 1 中并单击框 4，则两个中间幻灯片会更快地通过以在幻灯片 4 中结束，例如这个滑块：

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

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

任何帮助将不胜感激！

【问题讨论】：

标签： jquery twitter-bootstrap carousel

【解决方案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');
    }
}

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

【讨论】：

感谢您的输入，但可能是一个误解，我想要（当时）是如果您在幻灯片 1 中，然后单击幻灯片 5，轮播显示幻灯片 1 之间的幻灯片,2,3,4 和 5，不仅是从 1 到 5。总体而言，您的回复很有价值，因为使用该 CSS 可以通过 JS 中的一些 hack 来“手动”完成。
你说得对，我不明白你的问题在哪里。最初我只是更正原始答案，因为它不正确，我认为它可能会帮助像我这样的人在未来寻找如何去做。答案已更新。
感谢您的意见！希望它可以帮助某人
方法slidHelper()在哪里定义的？
哎呀。不是。你不需要它。我从自己的代码中复制并粘贴，它所做的只是一些样式。我在没有两次调用该函数的情况下编辑了答案。

【解决方案2】：

没有。

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

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

【讨论】：