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

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

0 голосов
/ 29 мая 2019

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

Это для веб-приложения, которое я делаю, работало с использованием 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>

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

Ответы [ 2 ]

1 голос
/ 29 мая 2019 
 <!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>
0 голосов
/ 29 мая 2019

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

Вы должны убедиться, что у вас установлена ​​последняя версия Bootstrap JS и CSS.

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...