利用Bootstrap Carousel"slide"滑动事件和.next类 [英] Utilise the Bootstrap Carousel "slide" event and the .next class
问题描述
所以我有一个小问题(类似于我前几天发布的一个问题: http://bit.ly /11JpbdY ),将SlabText用于加载时隐藏的内容上.这次,我试图获取slabText来更新滑块中某些内容的显示(使用Twitter Bootstrap的Carousel插件).
So I've got a little problem (similar to this one I posted the other day: http://bit.ly/11JpbdY) with using SlabText on a piece of content that is hidden on load. This time, I'm trying to get slabText to update the display of some content that is in a slider (using Twitter Bootstrap's Carousel plugin).
遵循Twitter的文档( http://twitter.github.com/bootstrap/javascript. html#carousel )作为Bootstrap的Carousel插件,我试图使用slide
事件,以便我重新调用SlabText使其正确显示.
Following Twitter's documentation (http://twitter.github.com/bootstrap/javascript.html#carousel) for Bootstrap's Carousel plugin, I'm trying to use slide
event so that I re-call SlabText to make it display correctly.
使用开发人员工具,我可以看到Carousel在处理一个.item
元素到下一个元素的幻灯片时添加了一个.next
类.然后在传输.active
类之前将其删除.
Using developer tools I can see that Carousel adds a .next
class as it processes the slide of one .item
element to the next. This is then removed before the .active
class is transferred.
我可以毫无问题地访问"slide"事件,但是试图掌握.next
元素确实很麻烦. 到目前为止,这是我代码的JSFiddle: http://jsfiddle.net/peHDQ/
I can access the "slide" event without any issue, but trying to get hold of the .next
element is proving troublesome. Here is a JSFiddle of my code thus far: http://jsfiddle.net/peHDQ/
简单地说一下我的问题;如何正确使用slide
事件触发功能?
To put my question simply; how should I correctly use the slide
event to trigger a function?
请让我知道是否还有其他有用的信息.
Please let me know if any additional information would be useful.
更多说明:
由于我一直无法掌握.next
类,因此我正在尝试使用一些jQuery.到目前为止,这是我的代码:
As I've been unable to get hold of the .next
class, I'm attempting to do this with some jQuery. Here is my code thus far:
$('.carousel').carousel({
interval: 5000
}).on('slide', function (e) {
$(this).find('.active').next().find('.slab').slabText();
});
据我了解,这应该抓住每个.slab
元素并触发SlabText插件....a,我得到一个错误:
From what I understand this should be grabbing each .slab
element and triggering the SlabText plugin.... alas I get an error:
未捕获的TypeError:对象[object Object]没有方法'slabtext'"
有人可以告诉我我在这里做错了什么吗...吗?我使用了完全相同的过程来添加类,并且效果很好(根据此JSFiddle:
Can anyone advise what I am doing wrong here...? I've used the exact same process to add a class and it works fine (as per this JSFiddle: http://jsfiddle.net/peHDQ/2/)
推荐答案
我确定了问题所在.问题是在显示下一张幻灯片之前调用了事件幻灯片".我增加了一点延迟,现在可以正常工作了.试试这个:
I identified the problem. The issue is that the event 'slide' is called before the next slide is made visible. I added a little delay, and it works fine now. Try this:
$('.carousel').carousel({
interval: 5000
}).on('slide', function (e) {
var xx = $(this);
setTimeout(function() {
xx.find('.active').next().find('.slab').slabText();
} , 0);
});
这篇关于利用Bootstrap Carousel"slide"滑动事件和.next类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!