Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Carousel / Html / Javascript / Twitter Bootstrap

Bootstrap Carousel Not Working, Does It Need Javascript Code?

Post a Comment
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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Cotizador de Seguros</title><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><nav><divclass="topnav"><imgsrc="imagenes/ooo.jpg"alt="sol"><spanclass="navbar-brand">Seguros Sunshine</span></div></nav><div><h2>En Seguros Sunshine tenemos muchas opciones para vos</h2></div><pid="todaInfo"></p><divclass="container"id="preguntas"><br><br><h3>Ingresa tus datos para iniciar una cotizacion</h3><tableclass="table table-striped"><thead><inputtype="text"id="nombre"class="no-outline"placeholder="Nombre"><inputtype="number"id="edad"class="no-outline"placeholder="Edad"><inputtype="email"id="email"class="no-outline"placeholder="Email"><inputtype="tel"id="telefono"class="no-outline"placeholder="Telefono"><div><buttononclick="Guardar()"id="guardado">Guardar</button></div></thead><tbodyid="info"class="shadow"></tbody></table></div><br><divclass="container shadow col-lg-6"><divid="contenido"class="pb-auto"style="display: none"><headerclass="p-3 bg-info text-white text-uppercase rounded"><h1class="text-center">Cotiza tu auto aqui</h1></header><formclass="mt-10 max-width mx-auto"action="#"id="cotizar-seguro"><divclass="d-flex align-items-center mb-5"><labelclass="font-weight-bold text-uppercase mr-3 w-20"for="marca">Marca:</label><selectclass="d-flex mt-2 p-3 rounded"id="marca"><optionvalue=""disabledselected> Seleccionar </option></select><labelclass="font-weight-bold text-uppercase ml-auto mr-3 w-20"for="marca">Modelo:</label><selectclass="d-flex mt-2 p-3 rounded"id="modelo"><optionvalue=""disabledselected> Seleccionar </option></select></div><divclass="d-flex justify-content-around align-items-center mb-5"><labelclass="font-weight-bold text-uppercase mr-3 w-20"for="year">Año:</label><selectclass="d-flex p-3 rounded"id="year"><optionvalue=""disabledselected> Seleccionar </option></select><labelclass="font-weight-bold text-uppercase ml-auto mr-3"for="color">Color:</label><inputtype="text"class="d-flex p-3 rounded"id="color"placeholder="El color es opcional"></div><fieldset><legendclass="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend><divclass="d-flex justify-content-around mt-5"><div><labelclass="font-weight-bold text-uppercase mr-2">Terceros</label><inputtype="radio"name="tipo"value="terceros"checked></label></div><div><labelclass="font-weight-bold  text-uppercase mr-2">Terceros Ampliada</label><inputtype="radio"name="tipo"value="terceros-ampliada"></label></div><div><labelclass="font-weight-bold  text-uppercase mr-2">Todo Riesgo</label><inputtype="radio"name="tipo"value="todo-riesgo"></label></div></div></fieldset><divid="cargando"style="display: none"><divclass="spinner"><divclass="bounce1"></div><divclass="bounce2"></div><divclass="bounce3"></div></div></div><divid="resultado"></div><divclass="d-flex justify-content-center py-4"><buttontype="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><divclass="container"><divid="carouselSeguro"class="carousel slide"data-ride="carousel"><olclass="carousel-indicators"><lidata-target="#carousel"data-slide-to="0"class="active"></li><lidata-target="#carousel"data-slide-to="1"></li><lidata-target="#carousel"data-slide-to="2"></li></ol><divclass="carousel-inner"><divclass="item active"><imgsrc="pikachu.jpg"alt="First slide"style="width: 50%; height: 50%"></div><divclass="item"><imgsrc="pikachu.jpg"alt="Second slide"style="width: 50% ; height: 50%"></div><divclass="item"><imgsrc="pikachu.jpg"alt="Third slide"style="width: 50%; height: 50%"></div></div><aclass="left carousel-control"href="#carousel"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control"href="#carousel"role="button"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"></span><spanclass="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><linkrel="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><scriptdefersrc="variables.js"></script><scriptdefersrc="cotizadordeauto.js"></script></html>

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