Question

启用后，轮播中的某些幻灯片在过渡到下一张幻灯片之前应该间隔1000。其他的间隔应该为5000。如何在jQuery中获得活动幻灯片，以更改轮播间隔？我还想根据正在运行的幻灯片来运行脚本。

幻灯片的长度约为30张幻灯片，仅供参考。恒定的静态幻灯片过渡时间使吸收幻灯片上显示的信息更加困难。我想根据显示的当前幻灯片触发其他动画和效果。并根据当前幻灯片上的文字数量来改变幻灯片的速度。

if ($('.carousel').carousel(5)) { playa = false; setTimeout(playa = true, 6000); } 但这只是使旋转木马跳到幻灯片5；

$('.carousel').on('slide', function (e) { var slideFrom = $(this).find('.active').index();console.log(slideFrom); alert("respond!") } 这没有给出任何回应

我对此尝试了一半-但我认为slide.bs.carousel仅是bs3： $('#Carousel').on('slide.bs.carousel', function (ev) { var id = ev.relatedTarget.id; switch (id) { case "1": console.log("1"); break; case "2": console.log("2"); break; case "3": console.log("3"); 实际上，以下内容确实改变了数据间隔的值，但幻灯片的改变速度却没有改变。

aboutGo = () => { $('.carousel').carousel(0); $('.carousel').attr({ 'data-interval': '2000' });

Answer 1

我现在可以使用以下解决方案：

slideEvent = () => {
  switch (slideNumber) {

  case 0: console.log("First poem is...");
    $('.carousel').carousel(0);
    wait = 6000;
    break;

  case 1: console.log("sampla");
    wait = 4000;
    $('.carousel').carousel(1);

    break;
  case 2: console.log("according to legends");
    $('.carousel').carousel(2);
    break;

  case 3: console.log("nexto");
    $('.carousel').carousel(3);

    break;
  case 4: console.log("and then...");
    wait = 1000;
    $('.carousel').carousel(4);

    break;

  case 5: console.log("and then...");
    wait = 4000;
    $('.carousel').carousel(5);

    break;
  case 6: console.log("and then...");
    $('.carousel').carousel(6);

    break;
  case 7: console.log("and then...");
    $('.carousel').carousel(7);

    break;
  case 8: console.log("and then...");
    $('.carousel').carousel(8);

    break;
  case 9: console.log("and then...");
    $('.carousel').carousel(9);

    break;
  case 10: console.log("and then...");
    $('.carousel').carousel(10);

    break;

  default: break;

}

}

$('.carousel').carousel({
    pause: false,
    interval: 0,

})


var slideNumber = 0;
var wait = 4000;
changeSlide = () => {

  setTimeout(changeSlide, wait);
  slideEvent();
  slideNumber++;
  ;
}
changeSlide();

在bootstrap4传送带中，如何使特定幻灯片停留更长的时间？

1 个答案: