Bootstrap 4 当来自 node.js 服务器的 运行 时轮播不工作

Question

我有教程中的通用 bootstrap 旋转木马之一。当我 运行 使用 "Live Server" 扩展名的网站时，一切正常。加载后轮播开始自动移动。

然而，当我运行通过一个简单的 node.js 服务器为网站提供服务时，轮播不会自动滑动，但它仍然响应点击图片。

我已经尝试 运行 我所有的脚本，在文档准备好之后，但这并没有什么不同。我还尝试查看 Chrome 中的开发工具，并且没有与我网站中的任何文件相关的错误。

轮播：

<div id="carouse-container">
  <div
    id="myCarousel"
    class="carousel slide"
    data-ride="carousel"
    data-
    interval="4000"
    data-pause="false"
  >
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/åbenthus.png" />
      </div>
      <div class="carousel-item">
        <img src="images/dsa.png" />
      </div>
      <div class="carousel-item">
        <img src="images/proteinpowder.png" />
      </div>
    </div>
  </div>
</div>

Node.js-服务器:

var express = require("express");
var app = express();
var path = require("path");

app.use(express.static(path.join(__dirname, "public")));

app.listen(8080, () => {
  console.log("listening on port 8080");
});

我希望轮播在网站加载时自动启动。

Answer 1

我的 Node.js 在 raspberrypi 上 运行，由于某种原因，传送带无法启动。我怀疑这是因为元素的加载方式以及 javascript 如何与 bootstrap 一起执行，而我的 raspberry pi 不是最快的机器。

我决定制作一个新的 js 文件，并使用 javascript 而不是 bootstrap class 手动启动轮播（如何做到这一点，可以在 bootstrap 文档），然后我设置了 2 秒的超时。所以js文件加载后2秒，就会找到我的轮播div，并启动轮播。这种延迟是确保轮播在任何 javascript 尝试启动它之前加载的原因。