Skip to content Skip to sidebar Skip to footer

Bootstrap Carousel Not Working, Does It Need Javascript Code?

I did an exact copy of the Carousel at the Bootstrap page example but it does not work at all. The slide does not work, it keeps in the first image always. Should I add some Javasc

Solution 1:

Just change image file to yours!
This code works well for me:

     <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>Cotizador de Seguros</title>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
         </head>
         <body>
            <nav>
              <div class="topnav">
            <img src="imagenes/ooo.jpg" alt="sol">
            <span class="navbar-brand">Seguros Sunshine</span>        
          </div>            
          </nav>
          <div>
             <h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>                  
           </div>      
               <p id="todaInfo"></p>
             <div class="container" id="preguntas">        
             <br>
             <br>
              <h3>Ingresa tus datos para iniciar una cotizacion</h3>
              <table class="table table-striped">    
              <thead>
              <input type="text" id="nombre" class="no-outline" placeholder="Nombre">
              <input type="number" id="edad" class="no-outline" placeholder="Edad">
              <input type="email" id="email" class="no-outline" placeholder="Email">
              <input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
              <div>
                <button onclick="Guardar()" id="guardado">Guardar</button>
              </div>
              </thead>
              <tbody id="info" class="shadow">          
              </tbody>
              </table>
              </div>
              <br> 
              <div class="container shadow col-lg-6">
                <div id="contenido" class="pb-auto" style="display: none">
                <header class="p-3 bg-info text-white text-uppercase rounded">
                  <h1 class="text-center">Cotiza tu auto aqui</h1>
                  </header>
                  <form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
                   <div class="d-flex align-items-center mb-5">
                  <label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
                <select class="d-flex mt-2 p-3 rounded" id="marca">
                  <option value="" disabled selected> Seleccionar </option>
                </select>
                <label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
                <select class="d-flex mt-2 p-3 rounded" id="modelo">
                  <option value="" disabled selected> Seleccionar </option>
                </select>
                    </div>
                    <div class="d-flex justify-content-around align-items-center mb-5">
                   <label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
                   <select class="d-flex p-3 rounded" id="year">
                  <option value="" disabled selected> Seleccionar </option>
                </select>
                <label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
                <input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
                     </div>
                    <fieldset>
                   <legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>    
                    <div class="d-flex justify-content-around mt-5">
                      <div>
                    <label class="font-weight-bold text-uppercase mr-2">Terceros</label>
                    <input type="radio" name="tipo" value="terceros" checked>
                    </label>
                  </div>
                  <div>
                    <label class="font-weight-bold  text-uppercase mr-2">Terceros Ampliada</label>
                    <input type="radio" name="tipo" value="terceros-ampliada">
                    </label>
                  </div>
                  <div>
                    <label class="font-weight-bold  text-uppercase mr-2">Todo Riesgo</label>
                    <input type="radio" name="tipo" value="todo-riesgo">
                    </label>
                  </div>
                      </div>
        
                    </fieldset>
        
                    <div id="cargando" style="display: none">
                     <div class="spinner">
                    <div class="bounce1"></div>
                  <div class="bounce2"></div>
                  <div class="bounce3"></div>
                   </div>
                    </div>
                    <div id="resultado"></div>
                    <div class="d-flex justify-content-center py-4">
                     <button type="submit"
                    class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
                     </button>
                      </div>
        
                     </form>
                    </div>
                     </div>
        
                         <!--Cierre del form y container-->
                             <br>
                   <div class="container">
                     
                     <div id="carouselSeguro" class="carousel slide" data-ride="carousel">
                     <ol class="carousel-indicators">
                    <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                  <li data-target="#carousel" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner">
                  <div class="item active">
                     <img  src="pikachu.jpg" alt="First slide" style="width: 50%; height: 50%">
                    </div>
                   <div class="item">
                   <img  src="pikachu.jpg" alt="Second slide" style="width: 50% ; height: 50%">
                   </div>
                       <div class="item">
                          <img  src="pikachu.jpg" alt="Third slide" style="width: 50%; height: 50%">
                      </div>
                              </div>
                      <a class="left carousel-control" href="#carousel" data-slide="prev">
                      <span class="glyphicon glyphicon-chevron-left"></span>
                       <span class="sr-only">Previous</span>
                        </a>
                       <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                         <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                                           </a>
                         </div>
                      </div>     
                      </body>
                      </html>```

Solution 2:

Try copying 'CSS' link from bootstrap getting started page and copy in head tag and while JS scripts should be after body tag. follow this link to have more understanding.


Solution 3:

Add css files to the tag like

<head>
  <link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  </head>

and always put js files at the bottom of your html code after tag

    .
    .
    .
    </body>
    <script defer src="variables.js"></script>    
    <script defer src="cotizadordeauto.js"></script>
    </html>

Post a Comment for "Bootstrap Carousel Not Working, Does It Need Javascript Code?"