Question

我正在尝试为每张幻灯片设置不同的持续时间，因为我的一些幻灯片内容很大而且有些小请给我一个小提琴的解决方案

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

.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;
}

Answer 1

Bootstrap 3.1轮播不允许每张幻灯片有不同的持续时间，但它提供了我们可以使用的一种方法和一种事件来实现此目的。

我们将使用slid.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>

现在，我们所要做的就是：

使用slid.bs.carousel检测何时显示新项目事件
检查他的持续时间
使用.carousel('pause')
使用项目的持续时间和持续时间后设置超时完成后我们应该停止旋转木马

javascript代码如下所示：

var t;

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

$('#myCarousel').on('slid.bs.carousel', function () {   
     clearTimeout(t);  
     var duration = $(this).find('.active').attr('data-interval');

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

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

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

正如您所看到的，我们在开始时被迫添加一个起始间隔，并且我已将其设置为1000毫秒但我每次暂停旋转木马duration-1000时都将其删除。我已使用下面的行来解决第一项问题，因为该项目未被slid event捕获。

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

我还注意到，如果用户按下箭头，超时就会变得很疯狂，这就是我每次用户按下左右箭头时清除超时的原因。

以下是我的实例http://jsfiddle.net/paulalexandru/52KBT/，希望此回复对您有所帮助。

Answer 2

出于某种原因，暂停方法似乎对我有用。所以，我使用了以下代码，它对我有用。即使您在同一页面上有多个轮播，这也有效。但是，这种方法需要对每个轮播项强制使用data-interval属性。

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

Answer 3

首先，感谢您@paulalexandru 。起初您的代码对我不起作用，但是进行一些更改后，我能够达到预期的结果。主要问题与找不到 duration-interval 的元素有关，所以我使用javascript而不是jquery（我仍然是初学者）。因此，以下代码对我有用（我将旧代码保留为注释）

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

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>

Answer 4

$('.carousel .item').hasClass('active', function() {
    var SlideInterval = $(this).attr('data-interval');
    $('.carousel').carousel({ interval: SlideInterval });
});

Answer 5

如果您正在寻找 Angular 解决方案，请点击以下链接

Add interval for each mdb-carousel item in Angular

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

-- HTML

<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方法

 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;
    }
  }

Bootstrap 3.1轮播上每个项目的不同幻灯片持续时间

5 个答案: