使用 Bootstrap 轮播错误消息获取无法读取未定义的属性“offsetWidth”答案

【问题标题】：Getting Cannot read property 'offsetWidth' of undefined with Bootstrap carousel error message使用 Bootstrap 轮播错误消息获取无法读取未定义的属性“offsetWidth”
【发布时间】：2020-08-25 15:24:17
【问题描述】：

我收到以下错误消息：Getting Cannot read property 'offsetWidth' of undefined with Bootstrap carousel 错误消息与我的 Bootstrap carousel。

这是我的代码：

 <div id="myCarousel" class="carousel slide" >
    <ul class="carousel-indicators">
        <?php foreach ($repairPics as $ind => $pics) {  ?>
            <li data-target="#myCarousel" data-slide-to="<?php echo $ind;?>" <?php echo (($ind == 0) ? 'class="active"' : '');?>"></li>
        <?php } ?>
    </ul>
    <div class="carousel-inner" role="listbox" style="margin-left: 10%;height: 100%;">
        <?php foreach ($repairPics as $ind => $pics) {  ?>
            <div class="carousel-item <?php echo (($ind == 0) ? 'active' : '');?>">
            <img style="height: 100%;" class="d-inline-block w-100" src="https://earthsky.org/upl/2017/06/Interplanetary-Transport-System-SpaceX-Elon-Musk-300x158.jpg" alt="Starship">
            </div>
        <?php } ?>
     </div>
    <a class="carousel-nav-controls carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="fa fa-chevron-left"></span><span class="sr-only">Previous</span>
    </a>
    <a class="carousel-nav-controls carousel-control-next" href="#myCarousel" data-slide="next" style="right: 0%;">
        <span class="fa fa-chevron-right"></span><span class="sr-only">Next</span>
    </a>
  </div>
</div>

这是我的js代码：

  $("#myCarousel").carousel();

  $(".carousel-item").click(function(){
        $("#myCarousel").carousel(0);
  });

  $("a.carousel-nav-controls.carousel-control-prev").click(function(){
        $("#myCarousel").carousel("prev");
  });

  $("a.carousel-nav-controls.carousel-control-next").click(function(){
                $("#myCarousel").carousel("next");
   });

什么可能导致错误？

泰，凯文

【问题讨论】：

尝试将</ul> 下的</div> 移动到最底部，以便轮播 div 实际包裹轮播项目。
这是我的格式问题。我改了。
你的例子适合我。看看this fiddle。似乎您的示例中的另一个问题尚未显示。
问题应该是你的"active"类因为任何原因没有设置。看看this answer。
问题是我做到了。如果你看下面的代码：
，如果索引为 0，我已经将图像设置为活动状态

标签： javascript css bootstrap-4

【解决方案1】：

分辨率：

问题不在于 Javascript，也不在于活动设置。它与 carousel-item 类有关。我将它从 carousel-item 更改为 item。它现在正在工作。看来我可能需要升级 Bootstrap。

【讨论】：