Нет ошибок с каруселью, левая/правая кнопки не работают

Мои кнопки карусели Bootstrap не работают. В настоящее время отображается первое изображение, а также кнопки, однако изображение не меняется само по себе и не меняется, когда я нажимаю кнопки.

Это для веб-приложения, которое я делаю, с использованием Express. Я пытался изменить некоторые фрагменты кода, но ничего не изменило слайды. Есть 3 изображения, 2 других не отображаются, потому что они неактивны, поэтому У меня есть более 1 изображения.


<!--Dependencies -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script language = "JavaScript" type = "text/javascript">
  $(document).ready(function(){
    $('.carouselExampleControls').carousel({
      interval: 3000
    })
  })
</script>  
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<link rel = "stylesheet" href = "/assets/css/main.css">

<!--Carousel Code -->
<div id = "carouselExampleControls" class = "carousel slide" data-ride = "carousel">
  <div class = "carousel-inner">
    <div class = "carousel-item active">
      <img class = "d-block w-100" src = "https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg"
        alt = "First slide">
    </div>
    <div class = "carousel-item">
      <img class = "d-block w-100" src = "https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg"
        alt = "Second slide">
    </div>
    <div class = "carousel-item">
      <img class = "d-block w-100" src = "https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg"
        alt = "Third slide">
    </div>
  </div>
  <a class = "carousel-control-prev" href = "#carouselExampleControls" role = "button" data-slide = "prev">
    <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Previous</span>
  </a>
  <a class = "carousel-control-next" href = "#carouselExampleControls" role = "button" data-slide = "next">
    <span class = "carousel-control-next-icon" aria-hidden = "true"></span> 
    <span class = "sr-only">Next</span>
  </a>
</div>

Я ожидаю, что кнопки карусели будут работать после отображения страницы, однако в консоли есть ошибки нет.

У меня работает: codeply.com/go/mHTkYQ2ChB

— 29.05.2019 12:23

Это должно работать. Вы сделали некоторые добавления и упущения, которые все испортили. Я опубликую рабочий код в ближайшие несколько минут

— 29.05.2019 12:35

html bootstrap-4 carousel

29.05.2019 12:04

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Я только что нашел проблему, поэтому, если у вас тоже есть эта проблема, Послушай!

Вам необходимо убедиться, что у вас установлена актуальная версия Bootstrap JS а также CSS.

Обе версии должны быть одинаковыми; У меня был последний CSS, но не JS.

Моя Карусель теперь работает, спасибо тем, кто помог.

29.05.2019 12:14

 <!DOCTYPE html>
 <html lang = "en">
 <head>
 <title>Bootstrap Carousel</title>
 <meta charset = "utf-8">
 <meta name = "viewport" content = "width=device-width, initial-scale=1">
 <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>  

 <script language = "JavaScript" type = "text/javascript">
  $(document).ready(function(){
    $('.carouselExampleControls').carousel({
    interval: 3000
    })
  })
 </script>  

 </head>

 <body>

 <div id = "carouselExampleControls" class = "carousel slide" data-ride = "carousel">

     <ol class = "carousel-indicators">
         <li data-target = "#carouselExampleControls" data-slide-to = "0" class = "active"></li>
         <li data-target = "#carouselExampleControls" data-slide-to = "1"></li>
         <li data-target = "#carouselExampleControls" data-slide-to = "2"></li>
     </ol>  


     <div class = "carousel-inner">
         <div class = "item active">
             <img class = "d-block w-100" src = "https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt = "First slide">
         </div>
         <div class = "item">
             <img class = "d-block w-100" src = "https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt = "Second slide">
         </div>
         <div class = "item">
             <img class = "d-block w-100" src = "https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt = "Third slide">
         </div>
     </div>

     <a class = "left carousel-control" href = "#carouselExampleControls" role = "button" data-slide = "prev">
         <span class = "glyphicon glyphicon-chevron-left"></span>
         <span class = "sr-only">Previous</span>
     </a>
     <a class = "right carousel-control" href = "#carouselExampleControls" role = "button" data-slide = "next">
         <span class = "glyphicon glyphicon-chevron-right"></span> 
         <span class = "sr-only">Next</span>
     </a>

 </div>

 </body>
 </html>

29.05.2019 12:44

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

0,625rem не является допустимым значением CSS

Изображения растянуты во flex-контейнере, но не могут использовать align-self-center

Как создать выпадающий список в вертикальной панели навигации?

Как открыть всплывающее окно bootstrap4 при загрузке окна, если переменная сеанса php не установлена?

Bootstrap 4: каждая строка заполняет одинаковую высоту

Alert-dismissible не закрывается при нажатии кнопки закрытия начальной загрузки laravel

Почему мой абзац превышает строку hr, которая находится ниже абзаца при изменении размера?

Создать значок для загрузки нескольких файлов

Настройка управления формой начальной загрузки при выборе опции

Почему эти кнопки начальной загрузки касаются друг друга?

Нет ошибок с каруселью, левая/правая кнопки не работают

Ответы 2

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

Похожие вопросы