Question

我已经将bootstrap更新到3.1.0到3.3.2并将几个部分更新到我的代码中，以使其与最新版本的bootstrap保持稳定。

我遇到的是，即使Carousel-data-api的使用相同，它也不会因某些原因而起作用。我将3.3.2 Carousel-data-api函数更改为3.1.0（仅此部分）一切都恢复正常。

这是3.1.0版本

  $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
    var $this   = $(this), href
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
    var options = $.extend({}, $target.data(), $this.data())
    var slideIndex = $this.attr('data-slide-to')
    if (slideIndex) options.interval = false

    $target.carousel(options)

    if (slideIndex = $this.attr('data-slide-to')) {
      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
  })

  $(window).on('load', function () {
    $('[data-ride="carousel"]').each(function () {
      var $carousel = $(this)
      $carousel.carousel($carousel.data())
    })
  })

}(jQuery);

这是3.3.2版本

  var clickHandler = function (e) {
    var href
    var $this   = $(this)
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
    if (!$target.hasClass('carousel')) return
    var options = $.extend({}, $target.data(), $this.data())
    var slideIndex = $this.attr('data-slide-to')
    if (slideIndex) options.interval = false

    Plugin.call($target, options)

    if (slideIndex) {
      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
  }

  $(document)
    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)

  $(window).on('load', function () {
    $('[data-ride="carousel"]').each(function () {
      var $carousel = $(this)
      Plugin.call($carousel, $carousel.data())
    })
  })

}(jQuery);

以下是我如何调用/使用该方法;

<div class="tab-pane box-products  tabcarousel<?php echo $id; ?> slide" id="tab-<?php echo $tab.$id;?>">
<?php if( count($products) > $itemsperpage ) { ?>
                <div class="carousel-controls">
                <a class="carousel-control left" href="#tab-<?php echo $tab.$id;?>"   data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#tab-<?php echo $tab.$id;?>"  data-slide="next">&rsaquo;</a>
                </div>
                <?php } ?>
...
...

//Output of $tab.$id will result like :tab-latest4
//So basically : <a class="carousel-control left" href="#tab-latest4"   data-slide="prev">&lsaquo;</a>

用法：http://getbootstrap.com/javascript/#carousel-usage

我没有加载JS，CSS对象的问题。

我有什么遗漏用法吗？提前谢谢！

Bootstrap Carousel-Data-API 3.1.0到3.3.2，不再工作了

0 个答案: