Question

正如问题所述，我需要我的旋转木马才能立即开始活动。我不想放弃动画但是立即激活指示器。这是我试过的，无济于事我还修改了我的轮播以使用淡入淡出动画而不是默认滑动

脚本代码：

$('.full.portfolio .carousel-indicators li').click(function (){
    $('.full.portfolio .carousel-indicators li').removeClass('active');
    $(this).addClass('active');
});

你可能已经猜到了，.full.portfolio是我的旋转木马

Answer 1

$('you carousel id or class').carousel({
  interval: 2000 // set your desired interval
})

参考http://getbootstrap.com/javascript/#carousel

Answer 2

如果你使用bootstrap 2.3.2你可以修改javascript轮播类定义，如下所示;

现有代码在更新指标之前等待'滑动'事件，所以首先要做的是禁用此代码，该代码可在幻灯片功能中找到旋转木马原型。像这样评论......

// disabled original code that waits for the slider transition to complete before
// setting the active indicator
//this.$element.one('slid', function () {
  //var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
  //$nextIndicator && $nextIndicator.addClass('active')
//})

现在你需要一个类似于getActiveIndex的新函数，但它还需要检查是否存在挂起的next / prev索引。将此功能添加到轮播原型......

// get the index of the carousel item about the be shown
// or the current item, if not transitioning
, getNextActiveIndex: function () {
    var nextActive = this.$element.find('.item.next')
      , prevActive = this.$element.find('.item.prev')
    this.$active = this.$element.find('.item.active')

    if (!nextActive.length) {
      nextActive = prevActive 
    }
    if (!nextActive.length) {
      nextActive = this.$active
    }

    this.$items = this.$active.parent().children()
    return this.$items.index(nextActive)
  }

现在设置活动/下一个指标。这需要在'prev'或'next'css类之后完成已被添加到旋转木马项目。因此，在返回...之前将此代码放在幻灯片函数的末尾。

  // by now the 'next' or 'prev' css class has been added to the carousel item
  // so we can call getNextActiveIndex 
  var $nextIndicator = $(this.$indicators.children()[this.getNextActiveIndex()])
  $nextIndicator && $nextIndicator.addClass('active')

删除Bootstrap Carousel幻灯片延迟

2 个答案: