無法使用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

嘗試將“活動”類別設置為輪播項目之一。

Answer 2

嘗試將.item設置為所有.carousel-item。

那是我的解決方案：

• Bootstrap 4.0.0
• jQuery的3.2.1苗條