Создавая парусный веб-сайт, в части отзывов левый и правый элементы управления и индикаторы не реагируют. Это потому, что я не включил или не вызвал функцию в 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("/", .. я не упомянул карусель. Нет реакции, когда я ожидаю, что она будет перемещаться по слайдам с обзорами морских путешествий.
Вам нужно включить 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
Bootstrap CSS и Bootstrap JS разделены. Файл JS должен быть помещен в тег script в самом низу вашего тега <body>.
Спасибо! И Bootstrap CSS, и Bootstrap JS были на месте, это вызывало проблему, потому что их версии не совпадали! Все отсортировано
Чтобы прояснить, показанные ссылки css и bootstrap помещаются в <head> страницы. Означает ли это, что загрузочный cdn не включает util.js? Я начинающий программист.