Bootstrap Carousel获取条目数返回0及手动调用报错求助

看起来你遇到的两个问题确实是关联的，核心原因是脚本引入顺序错误，再加上一个小的选择器拼写失误，咱们一步步来解决：

1. 脚本引入顺序导致carousel()不是函数 #

你当前的脚本引入顺序存在冲突：

• 先引入了slim版的jQuery
• 接着引入Popper.js和Bootstrap JS（此时Bootstrap会把它的插件绑定到这个slim jQuery上）
• 最后又引入了完整版的jQuery，这会直接覆盖全局的$和jQuery变量

问题就出在这里：Bootstrap的插件只挂载到了第一个slim jQuery的原型上，后面引入的完整版jQuery是完全独立的新实例，没有继承Bootstrap的方法，所以你调用$('.carousel').carousel()时会报错“不是函数”。

修复方案： #

删掉slim版的jQuery引入，只保留完整版的，并且确保它在Bootstrap JS之前加载：

<!-- 只保留完整版jQuery，放在最前面 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

2. 选择器拼写错误+脚本问题导致$('.carousel-item').length返回0 #

你的外部JS里有个明显的拼写失误：轮播的id是carouselExampleIndicators，但你写成了#ccarouselExampleIndicators（多了一个字母c），这会导致初始化轮播的代码找不到目标元素。

另外，之前的脚本顺序冲突也可能干扰DOM元素的正常获取，当你修正脚本顺序后，再修正选择器，就能正常统计carousel-item的数量了。

修复方案： #

修正外部JS里的选择器，确保代码在DOM加载完成后执行（你已经用了$(document).ready，这部分没问题）：

$(document).ready(function() {
  // 修正id选择器，去掉多余的c
  $("#carouselExampleIndicators").carousel({ interval: 1000, ride: true });
  // 现在应该能正确返回5了
  console.log($(".carousel-item").length);
});

额外的小优化（可选但重要） #

• Bootstrap 4的轮播要求至少有一个carousel-item带有active类才能正常显示，建议给第一个轮播项加上这个类：

<div class="carousel-item active">
  <img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/landscapes/Old Sheds Evandale (Acrylic).tiff" alt="First Mage">
</div>

• 你的carousel-inner的style里height: 400缺少单位，应该改成height: 400px，否则高度样式不会生效：

<div class="carousel-inner" style="height: 400px;" role="listbox">

按照上面的步骤修改后，两个问题应该都能解决了。

内容的提问来源于stack exchange，提问作者dancingbush