javascript - 无法使用 Bootstrap Carousel 读取未定义的属性 'offsetWidth'

Question

我有一个 Bootstrap Carousel，但有一些问题。我尝试使用其他类似的解决方案，但我不能适合我的情况......

此图片显示了我的页面上的错误:

HTML 代码

<div id="carouselExampleIndicators" class="carousel slide container" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active" style="background-image: url('/content/mbcarstestdrive/images/_MB_GLC Coupe_Landing Page.jpg')">
            <div class="carousel-caption d-none d-md-block">
            </div>
        </div>
        <div class="carousel-item" style="background-image: url('/content/mbcarstestdrive/images/Actros_Pure_1000.jpg')">
            <div class="carousel-caption d-none d-md-block">
            </div>
        </div>

        <div class="carousel-item" style="background-image: url('/content/mbcarstestdrive/images/MB_VCL_Landing page_VITO_31.10.jpg')">
            <div class="carousel-caption d-none d-md-block">
            </div>
        </div>
    </div>

    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

Boostrap JS 行错误

$next[0].offsetWidth // force reflow

return this.slide('next')

return fn.apply( context || this, args.concat( slice.call( arguments ) ) );

$next 错误代码行(其中 $error 被初始化)。我认为这是代码的一部分。

Carousel.prototype.slide = function (type, next) {
var $active   = this.$element.find('.item.active')
var $next     = next || this.getItemForDirection(type, $active)
var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right'
var fallback  = type == 'next' ? 'first' : 'last'
var that      = this

if (!$next.length) {
  if (!this.options.wrap) return
  $next = this.$element.find('.item')[fallback]()
}

if ($next.hasClass('active')) return (this.sliding = false)

var relatedTarget = $next[0]
var slideEvent = $.Event('slide.bs.carousel', {
  relatedTarget: relatedTarget,
  direction: direction
})
this.$element.trigger(slideEvent)
if (slideEvent.isDefaultPrevented()) return

this.sliding = true

isCycling && this.pause()

if (this.$indicators.length) {
  this.$indicators.find('.active').removeClass('active')
  var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
  $nextIndicator && $nextIndicator.addClass('active')
}

var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
if ($.support.transition && this.$element.hasClass('slide')) {
  $next.addClass(type)
  $next[0].offsetWidth // force reflow
  $active.addClass(direction)
  $next.addClass(direction)
  $active
    .one('bsTransitionEnd', function () {
      $next.removeClass([type, direction].join(' ')).addClass('active')
      $active.removeClass(['active', direction].join(' '))
      that.sliding = false
      setTimeout(function () {
        that.$element.trigger(slidEvent)
      }, 0)
    })
    .emulateTransitionEnd(Carousel.TRANSITION_DURATION)
} else {
  $active.removeClass('active')
  $next.addClass('active')
  this.sliding = false
  this.$element.trigger(slidEvent)
}

isCycling && this.cycle()

return this

}

非常感谢!

Answer 1

尝试将 .item 设置为所有 .carousel-item。

这就是我的解决方案:

• Bootstrap 4.0.0
• jquery 3.2.1 slim