Twitter bootstrap bootstrap 3.1转盘上每个项目的不同滑动持续时间

我试图为每一张幻灯片设置不同的持续时间，因为我的一些幻灯片有大的内容，一些小的内容。请用fiddle给我一个解决方案

我尝试过这个，但它只适用于幻灯片动画计时：

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

---

Bootstrap 3.1 carousel不允许每张幻灯片有不同的持续时间，但它提供了一种方法和一个事件，我们可以使用这些方法来避免这种情况

我们将使用

slided.bs.carousel

事件来检测旋转木马何时完成其幻灯片转换，并使用

.carousel（'pause'）

选项来停止旋转木马在项目之间循环

我们将在每个具有不同持续时间的转盘项目上使用此属性

data interval=“x”

，因此我们的html将如下所示，例如：

<div class="carousel-inner">
    <div class="active item" data-interval="3000">
        <img src="Url 1" />
    </div>
    <div class="item" data-interval="6000">
        <img src="Url 2" />
    </div>
    <div class="item" data-interval="9000">
        <img src="Url 3" />
    </div>
</div>

如您所见，我们在开始时被迫添加一个起始间隔，我已将其设置为1000ms，但每次暂停转盘

duration-1000

，我都会将其删除。我使用下面的几行来解决第一个项目问题，因为

滑动事件未捕获该项目

var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);

我还注意到，如果用户按下箭头，超时会变得疯狂，这就是为什么每次用户按下左右箭头时我都会清除超时

这是我的实例，希望这个回答能对你有所帮助。
出于某种原因，暂停方法似乎确实对我有用。所以，我使用了下面的代码，它对我很有效。即使在同一页面上有多个旋转木马，也可以使用此功能。但是，这种方法要求每个转盘项目都必须具有数据间隔属性

var t;
var start = $('#myCarousel').find('.active').attr('data-interval');

t = setTimeout(function () {
    $('#myCarousel').carousel('next')
}, start);

$('#myCarousel').on('slid.bs.carousel', function () {

    clearTimeout(t);
    var duration = $('#myCarousel').find('.active').attr('data-interval');

    //$('#myCarousel').carousel('pause');
    t = setTimeout("$('#myCarousel').carousel('next');", duration);
})

$('.carousel-control.right').on('click', function () {
    clearTimeout(t);
});

$('.carousel-control.left').on('click', function () {
    clearTimeout(t);
});

首先，谢谢你@paulalexandru。您的代码起初对我不起作用，但是做了一些更改，我能够达到预期的结果。主要的问题是元素没有找到持续时间间隔，因此我使用了javascript而不是jquery（我还是一个初学者）。所以下面的代码对我有用（我将旧代码保留为注释）

HTML

<div class="carousel-inner" role="listbox">
    <div class="item active" data-interval="3000">
        <img class="first-slide carousel-image-background">
            <div class="container">
                <div class="carousel-caption">
                    <h2 class="carousel-h2">My title</h2>
                    <p class="carousel-p">My description text.</p>
                </div>
            </div>
    </div>
</div>


我的头衔
我的描述文本
如果您正在寻找角度解决方案，请在下面链接


以下是该链接的摘录：
在HTML中，我们需要使用幻灯片事件可用的activeSlideChange方法将carousel组件传递回Typescript。还需要为每个转盘项目添加ID以供参考

--HTML

嗨，如果可能的话，我想要一些帮助。。我对滑块的持续时间有问题，脚本似乎不能与
数据持续时间一起工作。。这里是我的帖子的链接，你在这里有一切你需要的，以使其工作，你在这里甚至有一个工作的例子。现在，您可以根据自己的代码对其进行调整。正如您在这个JSFIDLE示例中看到的，它工作得非常好，您只需要花一些时间了解您需要做什么。您能检查一下我的小提琴吗？出了什么问题？？我已经运行了很多次我的代码，但我不明白为什么旋转木马会启动，这只是第一次，第一张幻灯片会暂停4秒，而它应该是8秒。。当它再次从Begging开始时，会像预期的那样暂停8秒。您需要使用外部文件加载bootstrap.js库。当前缺少。您没有添加它。它不见了。无论如何，在理解html/css/javascript时，您似乎遇到了很大的问题，所以在能够处理基本问题之前，不应该使用twitter引导。你在这个页面上有你所需要的一切，即使是一个简单的工作示例，如果你不能复制它，这意味着你需要从一开始就使用基本的html、css和javascript进行if。欢迎使用Stack Overflow！感谢您提供这段代码片段，它可能会提供一些即时帮助。通过说明为什么这是一个很好的解决问题的方法，正确地解释它的教育价值，并将使它对未来有类似但不完全相同问题的读者更有用。请您的答案添加解释，并说明适用的限制和假设。这并不能解决每个项目具有不同间隔的特性，而只是为所有项目设置相同的间隔。这在我看来更为简洁。暂停@paulalexandru的优秀帖子增加了不必要的复杂性，特别是在使用修改的交叉淡入（过渡）时间时。确保停止旋转木马本身的数据传输=“旋转木马”。使用上面的代码，javascript处理所有幻灯片更改工作。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-我想避免重复解决方案。但是，如果链接将被删除，这是有意义的。谢谢你的评论
$('.carousel .item').hasClass('active', function() {
    var SlideInterval = $(this).attr('data-interval');
    $('.carousel').carousel({ interval: SlideInterval });
});

var t;
//var start = $('#myCarousel').find('.active').attr('data-interval');
var start = document.getElementsByClassName("item active")[0].getAttribute("data-interval");


t = setTimeout(function () {
    $('#myCarousel').carousel('next')
}, start);

$('#myCarousel').on('slid.bs.carousel', function () {

    clearTimeout(t);
    //var duration = $('#myCarousel').find('.active').attr('data-interval');
    var duration = document.getElementsByClassName("item active")[0].getAttribute("data-interval");

    $('#myCarousel').carousel('pause');
    t = setTimeout("$('#myCarousel').carousel('next');", duration);
    console.log(duration);
})

$('.carousel-control.right').on('click', function () {
    clearTimeout(t);
});

$('.carousel-control.left').on('click', function () {
    clearTimeout(t);
});

<div class="carousel-inner" role="listbox">
    <div class="item active" data-interval="3000">
        <img class="first-slide carousel-image-background">
            <div class="container">
                <div class="carousel-caption">
                    <h2 class="carousel-h2">My title</h2>
                    <p class="carousel-p">My description text.</p>
                </div>
            </div>
    </div>
</div>

<div>
  <mdb-carousel  #carousal  [interval]="1000" [isControls]="false" class="carousel slide carousel-fade" [animation]="'fade'"
  (activeSlideChange)="activeSlideChange(carousal)" >
    <mdb-carousel-item id='home'>
      <!-- THIS NEEDS TO BE DISPLAYED FOR 5 SECS -->
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
    </mdb-carousel-item>

    <mdb-carousel-item id='time'>
      <!-- THIS NEEDS TO BE DISPLAYED FOR 15 SECS -->
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
    </mdb-carousel-item>
  </mdb-carousel>
</div>

 activeSlideChange(cc: CarouselComponent){
   let slideItem = cc.slides[cc.activeSlide];
   let id = slideItem.el.nativeElement.id;
   console.log(id);
    if ( id === 'home') {
        cc.interval = 1000 * 5 ; // 5 secs
    } else if ( id === 'time') { 
      cc.interval = 1000 * 15; // 15 secs
    }else  {
      cc.interval = 5000;
    }
  }