我创建了以下函数:
//Toggle height of header-foto function
function height_toggler() {
$('body').toggleClass('large-slider small-slider',500);
$('#height-toggler').find('i').toggleClass('fa-rotate-270 fa-rotate-90');
}
当用户单击按钮时,我调用此函数:
// bind the function to a click on the toggler
$('#height-toggler').click( function() {
height_toggler();
});
这工作得很好,你可以在 this page 上看到它。
我的客户也希望将此功能绑定(bind)到 Bootstrap Carousel 的 slide
event并且仅在具有 100% 高度轮播的页面上。
我想出了以下代码,但是每次轮播滑动时都会触发(我理解)。如何使其仅在页面加载后的第一张幻灯片上触发?
if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
$('.carousel').on('slide.bs.carousel', function () {
height_toggler();
});
}
最佳答案
您可以使用one()方法。
if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
$('.carousel').one('slide.bs.carousel', function () {
height_toggler();
});
}
关于javascript - 将 jquery 函数连接到 bootstrap 的轮播幻灯片事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38268561/