Question

我正在尝试将幻灯片事件添加到轮播，但它没有启动

<div id="background-carousel">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active" style="background-image:url('images/Home BG 1.jpg')"></div>
        <div class="item" style="background-image:url('images/Home BG 3.jpg')"></div>
        <div class="item" style="background-image:url('images/home_bg2.jpg')"></div>  
      </div>
    </div>
</div>

我的javascript但它不起作用而且没有在图片幻灯片上显示任何提示

  $( document ).ready(function() {


     $('#myCarousel').carousel({
  interval: 4000
 });

 $('#myCarousel').on('slide', function () {
  alert("Slide Event");
 // console.log('slid event');
  });

  });

Answer 1

试试这个

$('#myCarousel').on('slide.bs.carousel', function () {
    alert("Slide Event");
    //console.log('slid event');
});

有两种支持的方法

<强> slide.bs.carousel 调用幻灯片实例方法时会立即触发此事件。

<强> slid.bs.carousel 当轮播完成幻灯片过渡时会触发此事件。

Answer 2

Bootstrap轮播提供活动，而幻灯片是： -

slid.bs.carousel
slide.bs.carousel

检查以下内容： -

$(document).ready(function(){
   $("#myCarousel").on('slid.bs.carousel', function () {
     alert('Finished sliding');
   });
});

或者

$(document).ready(function(){
  $("#myCarousel").on('slide.bs.carousel', function () {
     alert('Finished sliding');
  });
});

bootstrap carousel slide事件不起作用

2 个答案: