Блог

Главная - Вопросы по программированию - Bootstrap 5: сбой функций Javascript карусели при втором запуске

Bootstrap 5: сбой функций Javascript карусели при втором запуске

#javascript #carousel #bootstrap-5

Вопрос:

Я прочитал документы javascript по bootstrap 5 carousel и просто тестирую его на простой карусели, показанной ниже. Я не использовал изображения для каждого слайда, а вместо этого div, чтобы я мог создать полный рабочий пример. Я также не использовал никаких атрибутов data-bs, поскольку хочу реализовать функциональность с помощью Java script

 <!DOCTYPE html>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>                        
    </head>
    <body>
     <div id="carousel" class="carousel slide">
           <ol class="carousel-indicators">
               <li id="i1" data-bs-target="#carousel" class="active"></li>  
               <li id="i2" data-bs-target="#carousel"></li>  
               <li id="i3" data-bs-target="#carousel"></li>  
           </ol>

           <div class="carousel-inner">                    
               <div class="carousel-item active">
                 <div style="width : 100% ; height : 300px ; background-color : red ; border : 1px solid black">
                  Item-1 
                 </div>
                 <div class="carousel-caption">
                   <h3>Div 1</h3> 
                 </div>
               </div> 

               <div class="carousel-item">
                  <div style="width : 100% ; height : 300px ; background-color : green ; border : 1px solid black">
                   Item-2 
                  </div> 
                  <div class="carousel-caption">
                   <h3>Div 2</h3> 
                  </div>
               </div>

               <div class="carousel-item">
                 <div style="width : 100% ; height : 300px ; background-color : yellow ; border : 1px solid black">
                  Item-3 
                 </div>
                 <div class="carousel-caption">
                   <h3>Div 3</h3> 
                 </div>
               </div>                      
           </div>

           <a class="carousel-control-prev">
               <div id="i4" class="carousel-control-prev-icon"></div>   
           </a>
           <a class="carousel-control-next">
               <div id="i5" class="carousel-control-next-icon"></div>   
           </a>
       </div>
       <script> 
             //To Display Any Errors Upon running the carousel functions
            function debug(action)
            {
             try
             {
              action();   
             }
             catch(err){window.alert(err);}
            }
            
            let carousel=bootstrap.Carousel.getOrCreateInstance
            (
              document.getElementById("carousel")
             ,{
               interval : 2000,
               wrap : true,
               pause : "hover"  
              }           
            );

            document.getElementById("i1").addEventListener("click",()=>debug(()=>carousel.to(0)));
            document.getElementById("i2").addEventListener("click",()=>debug(()=>carousel.to(1)));
            document.getElementById("i3").addEventListener("click",()=>debug(()=>carousel.to(2)));

            document.getElementById("i4").addEventListener("click",()=>debug(()=>carousel.prev()));
            document.getElementById("i5").addEventListener("click",()=>debug(()=>carousel.next()));
        </script>    
    </body>
</html>

Каждая из функций carousel работает должным образом, за исключением двух проблем

  1. Часть инициализации карусели не работает, т.е. Интервал не составляет 2 секунды [на самом деле карусель вообще не начинает анимацию], а атрибуты наведения и паузы также не работают
  2. Функции to(), prev(), next() выполняются корректно только один раз, после чего они выдают эту ошибку введите описание изображения здесь

Любая помощь будет признательна

Метки: