1

Copié el código de bootstrap del carrusel sin modificar nada, solo le puse unas imagenes para hacer unas pruebas y no rota. Los botones de Previo y Siguiente no funcionan. Este es el código de Bootstrap

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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
  • A tu pregunta le faltan muchos detalles, están llamando correctamente las librerías? Commented el 5 ago. 2020 a las 18:57
  • Si, tengo rato trabajando con bootstrap y me va todo bien pero el carrusel no Commented el 6 ago. 2020 a las 1:21

2 respuestas 2

1

Es importante que te aseguros de tener las dependencias correctamente.

  1. el ccs de boostrap

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

  1. la liberia jquery

https://code.jquery.com/jquery-3.2.1.slim.min.js"

  1. el js de boostrap

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"

También puedes validad en la consola si tu código tiene algún error de javascript.

0

Como veo es el ejemplo exacto tomado desde la página de bootstrap, quizás no agregaste la función inicialización.

<script>
    $('.carousel').carousel({
        interval: 2000
    })
</script>

esto suponiendo que agregó correctamente las dependencias

<!DOCTYPE html>
<html>
    <head>

        <!---css--->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

    </head>
    <body>

        <!---Tu código html--->

        <!---js--->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
    </body>
</html>
1
  • Si, las tengo agregadas pero igual no me va :/ además como podría también cambiarle el tamaño? es que se ve muy grande y me ocupa toda la pantalla y quiero que sea más pequeño Commented el 5 ago. 2020 a las 17:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.