Bootstrap

Slider en Bootstrap

En este sencillo tutorial aprenderemos a crear nuestro propio slider en Bootstrap. Una de las ventajas de utilizar Bootstrap es que nos permite hacer una página totalmente responsive para que se pueda ajustar correctamente en dispositivos móviles y tablets.

¿Cómo crear un slider en Bootstrap?

Un slider o carousel en Bootstrap se puede crear de varias formas, una de ellas es solamente mediante código HTML como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Slider en Bootstrap</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
      <!-- Carousel indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="images/slide1.png" alt="First Slide">
          <div class="carousel-caption">
            <h3>Título de la primera diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
        <div class="item">
          <img src="images/slide2.png" alt="Second Slide">
          <div class="carousel-caption">
            <h3>Título de la segunda diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
        <div class="item">
          <img src="images/slide3.png" alt="Third Slide">
          <div class="carousel-caption">
            <h3>Título de la tercera diapositiva</h3>
            <p>Contenido de la diapositiva</p>
          </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  </body>
</html>

Antes de probar el ejemplo anterior es importante remplazar la imágenes por las nuestras. El resultado de visitar la página anterior seria el siguiente.

Slider en Bootstrap

Slider en Bootstrap

Explicación de atributos:

data-ride=”carousel”: Con este atributo se indica que el carousel debe comenzar la animación automáticamente después de cargar la página.

data-interval=”3000″: Se indica el tiempo que tarda entre cada transición. Esto solamente funciona si se indica la propiedad data-ride. En este caso la transición es de 3 segundos.

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo crear un slider en Bootstrap. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *