title: Bootstrap Carousel not working, does it need javascript code?
body: <p>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 Javascript? I put the jquery cdn on top of the bootstrap cdn as I saw in many posts about a possible solution, but it still no working. Below it is the html code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Cotizador de Seguros&lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" type="text/css" href="Style.css"&gt;
    &lt;script defer src="variables.js"&gt;&lt;/script&gt;
    &lt;script defer src="cotizadordeauto.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav&gt;
      &lt;div class="topnav"&gt;
        &lt;img src="imagenes/ooo.jpg" alt="sol"&gt;
        &lt;span class="navbar-brand"&gt;Seguros Sunshine&lt;/span&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div&gt;
      &lt;h2&gt;En Seguros Sunshine tenemos muchas opciones para vos&lt;/h2&gt;
    &lt;/div&gt;
    &lt;p id="todaInfo"&gt;&lt;/p&gt;
    &lt;div class="container" id="preguntas"&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;h3&gt;Ingresa tus datos para iniciar una cotizacion&lt;/h3&gt;
      &lt;table class="table table-striped"&gt;
        &lt;thead&gt;
          &lt;input type="text" id="nombre" class="no-outline" placeholder="Nombre"&gt;
          &lt;input type="number" id="edad" class="no-outline" placeholder="Edad"&gt;
          &lt;input type="email" id="email" class="no-outline" placeholder="Email"&gt;
          &lt;input type="tel" id="telefono" class="no-outline" placeholder="Telefono"&gt;
          &lt;div&gt;
            &lt;button onclick="Guardar()" id="guardado"&gt;Guardar&lt;/button&gt;
          &lt;/div&gt;
        &lt;/thead&gt;
        &lt;tbody id="info" class="shadow"&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;div class="container shadow col-lg-6"&gt;
      &lt;div id="contenido" class="pb-auto" style="display: none"&gt;
        &lt;header class="p-3 bg-info text-white text-uppercase rounded"&gt;
          &lt;h1 class="text-center"&gt;Cotiza tu auto aqui&lt;/h1&gt;
        &lt;/header&gt;
        &lt;form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro"&gt;
          &lt;div class="d-flex align-items-center mb-5"&gt;
            &lt;label class="font-weight-bold text-uppercase mr-3 w-20" for="marca"&gt;Marca:&lt;/label&gt;
            &lt;select class="d-flex mt-2 p-3 rounded" id="marca"&gt;
              &lt;option value="" disabled selected&gt; Seleccionar &lt;/option&gt;
            &lt;/select&gt;
            &lt;label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca"&gt;Modelo:&lt;/label&gt;
            &lt;select class="d-flex mt-2 p-3 rounded" id="modelo"&gt;
              &lt;option value="" disabled selected&gt; Seleccionar &lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="d-flex justify-content-around align-items-center mb-5"&gt;
            &lt;label class="font-weight-bold text-uppercase mr-3 w-20" for="year"&gt;Año:&lt;/label&gt;
            &lt;select class="d-flex p-3 rounded" id="year"&gt;
              &lt;option value="" disabled selected&gt; Seleccionar &lt;/option&gt;
            &lt;/select&gt;
            &lt;label class="font-weight-bold text-uppercase ml-auto mr-3" for="color"&gt;Color:&lt;/label&gt;
            &lt;input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional"&gt;
          &lt;/div&gt;
          &lt;fieldset&gt;
            &lt;legend class="font-weight-bold text-uppercase text-center w-full"&gt;Tipo Seguro&lt;/legend&gt;
            &lt;div class="d-flex justify-content-around mt-5"&gt;
              &lt;div&gt;
                &lt;label class="font-weight-bold text-uppercase mr-2"&gt;Terceros&lt;/label&gt;
                &lt;input type="radio" name="tipo" value="terceros" checked&gt;
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;label class="font-weight-bold  text-uppercase mr-2"&gt;Terceros Ampliada&lt;/label&gt;
                &lt;input type="radio" name="tipo" value="terceros-ampliada"&gt;
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;label class="font-weight-bold  text-uppercase mr-2"&gt;Todo Riesgo&lt;/label&gt;
                &lt;input type="radio" name="tipo" value="todo-riesgo"&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/fieldset&gt;
  
          &lt;div id="cargando" style="display: none"&gt;
            &lt;div class="spinner"&gt;
              &lt;div class="bounce1"&gt;&lt;/div&gt;
              &lt;div class="bounce2"&gt;&lt;/div&gt;
              &lt;div class="bounce3"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="resultado"&gt;&lt;/div&gt;
          &lt;div class="d-flex justify-content-center py-4"&gt;
            &lt;button type="submit" class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded"&gt;Cotizar Seguro
                  &lt;/button&gt;
          &lt;/div&gt;
  
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--Cierre del form y container--&gt;
    &lt;br&gt;
    &lt;div&gt;
      &lt;br&gt;
      &lt;div id="carouselSeguro" class="carousel slide" data-ride="carousel"&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#carouselExampleIndicators" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#carouselExampleIndicators" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item active"&gt;
            &lt;img class="d-block w-100" src="imagenes/grua.jpg" alt="First slide"&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
            &lt;img class="d-block w-100" src="imagenes/mapa.jpg" alt="Second slide"&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
            &lt;img class="d-block w-100" src="imagenes/online.jpg" alt="Third slide"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"&gt;
          &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"&gt;
          &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>