Bootstrap 轮播控件不适用于 node.js

Question

创建一个航海网站，在客户评价部分左右控件和指示灯没有反应。这是因为我没有在 app.js 中包含或调用该函数，还是我遗漏了一些 jQuery？（使用 .ejs）

我查看了 slick-carousel-npm 和其他包，简单的 HTML 和 CSS 形式代码也不起作用。

<section class="colouredSection">
  <div id="sectionContainer">

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <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>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
            <h2 class="testimonial-text">"What a beautiful day! Our skipper was amazing and even taught us how to sail a bit. I would
              definitely recommend and repeat in the future!!! A perfect way to spend an afternoon in Barcelona."</h2>
        </div>
        <div class="item">
          <h2 class="testimonial-text">"What a beautiful day! Our skipper was amazing and even taught us how to sail a bit. I would
            definitely recommend and repeat in the future!!! A perfect way to spend an afternoon in Barcelona."</h2>
      </div>
        <div class="item">
          <h2 class="testimonial-text">"What a beautiful day! Our skipper was amazing and even taught us how to sail a bit. I would
            definitely recommend and repeat in the future!!! A perfect way to spend an afternoon in Barcelona."</h2>
      </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</section>

<!-- CSS -->
  <link rel="stylesheet" href="css/styles.css">
  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,800,800i|Special+Elite|Playfair+Display:400i" rel="stylesheet">
<!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

在app.get("/", ..我没有提到旋转木马。当我期望它在航海旅行评论的幻灯片中移动时没有响应。

Answer 1

您需要在 <body> 标签中的某处包含 utils.js 或 bootstrap.js。

Lastly, if you’re building our JavaScript from source, it requires util.js.

https://getbootstrap.com/docs/4.0/components/carousel/

All Bootstrap’s JavaScript files depend on util.js and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js, there is no need to include this—it’s already there.

https://getbootstrap.com/docs/4.0/getting-started/javascript/#util

Bootstrap 轮播控件不适用于 node.js

Bootstrap carousel controls not working with node.js

html

ejs

node.js

carousel

bootstrap-4