gpt4 book ai didi

jquery - Twitter Bootstrap Carousel 滑动到特定索引但穿过中间索引?

转载 作者:行者123 更新时间:2023-12-01 01:16:48 25 4
gpt4 key购买 nike

目前我已经让我的轮播像这样在索引框中滑动:

http://50.21.181.12:3000/

但我希望如果您在幻灯片 1 中并单击框 4,则两个中间幻灯片会以更快的速度结束在幻灯片 4 中,就像这个 slider :

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

twitter-bootstrap的轮播有什么解决办法吗?

任何帮助将不胜感激!

最佳答案

我知道这是一篇旧帖子,但所选答案不正确。您可以通过使用 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');
}
}

这会递归地调用自身并增加一个滑动距离。目前,它的滑动速度基于当前幻灯片与目标幻灯片的距离。

关于jquery - Twitter Bootstrap Carousel 滑动到特定索引但穿过中间索引?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13126619/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com