0

Estoy teniendo problemas con mi Carousel en Bootstrap. Lo copie tal cual,descargué jquery,bootstrap.js tambien puse el viewport

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

  <title>Document</title>
  <style>
    .shine {}
  </style>
</head>

<body>
  <div class="continer">
    <div class="col-xs-8">
      <div id="carousel-ejemplo" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-ejemplo" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-ejemplo" data-slide-to="1" class="active"></li>
          <li data-target="#carousel-ejemplo" data-slide-to="2" class="active"></li>
          <li data-target="#carousel-ejemplo" data-slide-to="3" class="active"></li>
          <li data-target="#carousel-ejemplo" data-slide-to="4" class="active"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item-active">
            <img src="ten1.jpg" title="God of War" />
          </div>
        </div>
        <div class="carousel-inner" role="listbox">
          <div class="item-active">
            <img src="ten2.jpg" title="PUBG´S" width="928px" height="483px" />
          </div>
        </div>
        <div class="carousel-inner" role="listbox">
          <div class="item-active">
            <img src="ten3.jpg" title="Far Cry 5" width="928px" height="483px" />
          </div>
        </div>
        <div class="carousel-inner" role="listbox">
          <div class="item-active">
            <img src="ten4.jpg" title="Monster Hunter" width="928px" height="483px" />
          </div>
        </div>

        <div class="carousel-inner" role="listbox">
          <div class="item-active">
            <img src="ten5(yes).jpg" title="Fornite" width="928px" height="483px" />
          </div>
        </div>
        <!-- Controles -->
        <a class="left carousel-control" href="#carousel-ejemplo" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previo</span>
        </a>
        <a class="right carousel-control" href="#carousel-ejemplo" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Siguiente</span>
        </a>









      </div>
    </div>
  </div>
  <script src="js/jquery.js"></script>
  <script src="bootstrap.min.js"></script>
</body>

</html>

introducir la descripción de la imagen aquí

2
  • 1
    Parecería que te falta por añadir un fichero JS (y puede que otro CSS) con el código del carrusel.
    – Alvaro Montoro
    el 24 may. 2018 a las 22:38
  • Fuera de tópico: Que significa .shine en tu css? Por otro lado entrando en tu problema y complementando lo que dice @AlvaroMontoro aparte de añardir los ficheros asociados a Carousel necesitas inicializarlo. El ejemplo más elementas sería: $('.carousel').carousel() para más información te sugiero revises: bootstrap carousel. Venía a editar la pregunta pero ya hay una edición pendiente. jaja
    – Art_Code
    el 25 may. 2018 a las 0:11

1 respuesta 1

0

Te recomiendo leer la documentación de Bootstrap: Carousel

En tu código hay un par de errores, vamos a revisarlos:

  • El div que contiene tu carousel tiene de nombre de clase "continer", cambialo por "container".

  • Los elementos del ol "carousel-indicators" tienen todos la clase "active", solo el primero debe tenerla, además te recomiendo usar la etiqueta "ul" en vez de "ol"

  • Después del "carousel-indicators" se declara el "carousel-inner" que es donde se crearán los "carousel-item" que serán los div que contengan las imágenes que irán pasando en el carousel.

  • Solo el primer "carousel-item" debe tener la clase "active".

El código del carousel podría quedar parecido a este:

<div id="carousel-ejemplo" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
      <li data-target="#carousel-ejemplo" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-ejemplo" data-slide-to="1" ></li>
      <!-- Resto de elementos -->
    </ul>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src=".ten1.jpg" title="God of War" />
      </div>
      <div class="carousel-item">
        <img src=".ten2.jpg" title="PUBG´S" />
      </div>

     <!-- Resto de imagenes. -->
    </div>

    <!-- Controles -->
    <a class="carousel-control-prev" href="#carousel-ejemplo" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previo</span>
    </a>
    <a class="carousel-control-next" href="#carousel-ejemplo" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Siguiente</span>
    </a>
  </div>
1
  • muchas gracias Ferni me salvaste la vida te mando un saludo desde Victori el 31 may. 2018 a las 2:02

Tu Respuesta

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

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