【问题标题】:Bootstrap carousel controls not working with node.js引导轮播控件不适用于 node.js
【发布时间】:2019-08-31 08:43:39
【问题描述】:

创建一个航海网站,在推荐部分左右控件和指示器没有响应。这是因为我没有在 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("/", ...

【问题讨论】:

    标签: html node.js bootstrap-4 carousel ejs


    【解决方案1】:

    您需要在 &lt;body&gt; 标签中的某处包含 utils.jsbootstrap.js

    最后,如果您从源代码构建我们的 JavaScript,它需要 util.js。

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

    所有 Bootstrap 的 JavaScript 文件都依赖于 util.js,它必须与其他 JavaScript 文件一起包含。如果您使用的是已编译(或缩小)的 bootstrap.js,则无需包含它——它已经存在了。

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

    【讨论】:

    • 为了澄清所显示的 css 和引导链接被放置在页面的 中。这是否意味着引导 cdn 不包含 util.js?我是初级程序员。
    • Bootstrap CSS 和 Bootstrap JS 是分开的。 JS 文件应该放在 标签最底部的脚本标签中。
    • 谢谢! Bootstrap CSS 和 Bootstrap JS 都已安装,但由于它们的版本不匹配而导致了问题!全部排序
    猜你喜欢
    • 2018-12-21
    • 1970-01-01
    • 2014-08-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-20
    • 2016-05-16
    • 1970-01-01
    相关资源
    最近更新 更多