将 jQuery 函数连接到 Bootstrap 的轮播幻灯片事件

connect a jquery function to bootstrap's carousel slide event

本文关键字：幻灯片 事件 Bootstrap jQuery 函数 连接      更新时间：2023-09-26

我创建了以下函数：

//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();
});

这非常有效，您可以在此页面上实时查看它

我的客户还希望此功能绑定在引导轮播的slide事件上，并且仅在具有 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();
  });
}

如果你希望一个事件只执行一次，你可以使用 .one（） 代替.on() 

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
    $('.carousel').one('slide.bs.carousel', function () {
        height_toggler();
    });
}
相关文章：