javascript - 使用 Bootstrap 轮播错误消息获取无法读取未定义的属性“offsetWidth”
问题描述
我收到以下错误消息:Getting Cannot read property 'offsetWidth' of undefined with Bootstrap carousel 错误消息与我的 Bootstrap 轮播。
这是我的代码:
<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");
});
什么可能导致错误?
泰,凯文
解决方案
解析度:
问题不在 Javascript 中,也不在活动设置中。它与 carousel-item 类有关。我将它从 carousel-item 更改为 item。它现在正在工作。看来我可能需要升级 Bootstrap。
推荐阅读
- linux - CHECK_NRPE: (ssl_err != 5) 错误 - 无法完成与 192.168.XX 的 SSL 握手
- reactjs - 未捕获的类型错误:无法读取未定义的属性“displayName”
- javascript - 如何根据第一个值对数组求和和分组
- php - Doctrine ORM 2.9 同时使用 AnnotationDriver 和 AttributeDriver 来解析实体元数据
- python - python 2中的装饰器,用于装饰给定类的给定方法
- ansible - Ansible win_package 通知更改但不安装
- entity-framework - 使用实体框架从两个参数获取结果的正确语法是什么?
- maven - 如何设计一个 pom.xml 来满足防火墙后面的 Maven 存储库的断开连接的团队?
- android-studio - 在 Android Studio 中运行检测测试而不模拟用户操作
- python - 如何从熊猫数据框创建交互式绘图