Карусельные элементы управления Bootstrap не работают с node.js

Создавая парусный веб-сайт, в части отзывов левый и правый элементы управления и индикаторы не реагируют. Это потому, что я не включил или не вызвал функцию в 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("/", .. я не упомянул карусель. Нет реакции, когда я ожидаю, что она будет перемещаться по слайдам с обзорами морских путешествий.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
1 283
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно включить utils.js или bootstrap.js где-нибудь в теги <body>.

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

Чтобы прояснить, показанные ссылки css и bootstrap помещаются в <head> страницы. Означает ли это, что загрузочный cdn не включает util.js? Я начинающий программист.

Tallulah 10.04.2019 13:59

Bootstrap CSS и Bootstrap JS разделены. Файл JS должен быть помещен в тег script в самом низу вашего тега <body>.

Matt 10.04.2019 16:36

Спасибо! И Bootstrap CSS, и Bootstrap JS были на месте, это вызывало проблему, потому что их версии не совпадали! Все отсортировано

Tallulah 10.04.2019 23:18

Другие вопросы по теме