3.4 Carrusel de imagenes Bootstrap

Un carrusel es una forma elegante y fácil de implementar fotos con algunos efectos. Hay sin duda multiples estilos de estos en la red tanto de pago como gratis. Bootstrap nos proporciona uno gratis.

Se usa como framework de diseño Bootstrap 3 y jQuery.

La sintaxis básica es la siguiente

<div id='carrusel' class='carousel slide' data-ride='carousel'>
    <ol class='carousel-indicators'>
      <li data-target='#carrusel' data-slide-to='0'></li>
      <li data-target='#carrusel' data-slide-to='1'></li>
      ... Otras diapositivas 
    </ol> 
 
    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
      <div class='item active'>
        <img alt='' src='url'>
        <div class='caption'>
          <h3>Texto descriptivo</h3>
        </div>
      </div>

      <div class='item'>
        <img alt='' src=''>
        <div class='caption'>
          <h3>Texto descriptivo</h3>
        </div>
      </div>
	  
      <!-- Controls -->
          <a class="carousel-control left" href="#carrusel"  data-slide="prev">‹</a>
          <a class="carousel-control right" href="#carrusel" data-slide="next">›</a>
    </div> <!-- Carousel -->  
  </div>
</div>

Ejemplo: Las Joyas del Pescador


<!doctype html>
<html lang='es'>
<head>
  <meta charset="utf-8">
  <title>Las Joyas del Pescador</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Abril 1, 2016' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'> 
  <link href='joyas.css' rel='stylesheet'>
</head>
<body>
  <div class='container'>
    <div class='galeria'>
      <div id='carrusel' class='carousel slide' data-ride='carousel'>
        <ol class='carousel-indicators'>
          <li data-target='#carrusel' data-slide-to='0' class='active'></li>
          <li data-target='#carrusel' data-slide-to='1'></li>
          <li data-target='#carrusel' data-slide-to='2'></li>
          <li data-target='#carrusel' data-slide-to='3'></li>
          <li data-target='#carrusel' data-slide-to='4'></li>
        </ol> 
 
        <!-- Wrapper for slides -->
        <div class='carousel-inner'>
          <div class='item active'>
            <img alt='' src='joyas/brazalete.jpg'>
            <div class='caption'>
              <h3>Brazalete</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='joyas/caballeroAguila.jpg'>
            <div class='caption'>
              <h3>Caballero Águila</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='joyas/chimalli.jpg'>
            <div class='caption'>
              <h3>Chimalli</h3>
            </div>
          </div>

          <div class='item'>
            <img alt='' src='joyas/laOllita.jpg'>
            <div class='caption'>
              <h3>La ollita</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='joyas/Joyas.png'>
            <div class='caption'>
              <h3>Las Joyas del Pescador</h3>
            </div>
          </div>

          <!-- Controls -->
          <a class="carousel-control left" href="#carrusel"  data-slide="prev">‹</a>
          <a class="carousel-control right" href="#carrusel" data-slide="next">›</a>
        </div> <!-- Carousel -->  
      </div>
    </div>
  </div>
  
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>
body {
  padding-top: 60px;
  padding-bottom: 20px;
}

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.carousel-control.right {
  left: auto;
  right: 15px;
}
.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

 .item > img{
    max-width:100%;
}

div.galeria {
    margin: 0 auto;
    width: 50%;
}

Existen muchos ejemplos de aplicaciones en la red de carruseles con Bootstrap, se preentan aquí algunos de ellos.

Testimoniales

Propios para expresar opniniones o comentarios breves sobre un tema. Acompañados de una imagen o avatar de quien los emite


Imagenes agrupadas

Este tipo de carrusel es propio para tiendas en línea o servicios. Oriiginal se encontro para la versión 2 de Bootstrap, copiando los css3 necesarios funciona en Bootstrap 3.

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Tutorial Demo</title>
    <meta name='description' content='Bootstrap Demo'>
    <meta name='author' content='Untame.net'>
    <link href='//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' rel='stylesheet'>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script>
    <![endif]-->
    <link href='thumbnails.css' rel='stylesheet'>
  </head>

<body>
<div class='container well well-large'>
   <h2 class='text-center'>Desplazamiento mediante grupos de elementos.</h2>
   <hr>
   <h3>Productos del mundo Apple</h3>

  <div class='row-fluid'>
     <div class='carousel slide' id='myCarousel'>
       <div class='carousel-inner'>
         <div class='item active'>
          <ul class='thumbnails'>
            <li class='span3'>
              <div class='thumbnail'><img alt='' src='AppleIphone6.jpg'></div>
              <p>Apple iPhone 6,16GB<br>
              <small class='red'>$534.99</small><br>
              <a href='#' class='btn btn-success'>Buy Now</a></p>
            </li>
            <li class='span3'>
              <div class='thumbnail'><img alt='' src='AppleIphone64g.jpg'></div>
              <p>Apple iPhone 6 16GB 4G LTE <br>
              <small class='red'>$549.95</small><br>
              <a href='#' class='btn btn-success'>Buy Now</a></p>
            </li>
            <li class='span3'>
              <div class='thumbnail'><img alt='' src='AppleIphone5.jpg'></div>
              <p>Apple iPhone 5 A1428 16GB<br>
              <small class='red'>$244.99</small><br>
              <a href='#' class='btn btn-success'>Buy Now</a></p>
            </li>
            <li class='span3'>
              <div class='thumbnail'><img alt='' src='AppleIphone532GB.jpg'></div>
              <p>Apple iPhone 5 32GB<br>
              <small class='red'>$299.99</small><br>
              <a href='#' class='btn btn-success'>Buy Now</a></p>
            </li>
          </ul>
        </div>
        
        <div class='item'>
          <ul class='thumbnails'>
            <li class='span3'>
              <div class='thumbnail'><img alt='' class='img-responsive' src='AppleIpad2.jpg'></div>
              <p>Apple iPad Air 2 MH0W2LL<br>
              <small class='red'>$414.47</small><br>
              <a href='#' class='btn btn-success'>Buy Now</a></p>
            </li>
            <li class='span3'>
               <div class='thumbnail'><img alt='' src='AppleIpadPro.jpg'></div>
               <p>Apple iPad Air MD785LL<br>
               <small class='red'>$314.99</small><br>
               <a href='#' class='btn btn-success'>Buy Now</a></p>
            </li>
            <li class='span3'>
              <div class='thumbnail'><img alt='' src='Sponsored.jpg'></div>
              <p>Soporte Ipad<br>
              <small class='red'>$39.99</small><br>
              <a href='#' class='btn btn-success'>Buy Now</a></p>
            </li>
            <li class='span3'>
              <div class='thumbnail'><img alt='' src='portDesktiop.jpg'></div>
              <p>Port Desktop Ipad<br>
              <small class='red'>$23.99</small><br>
              <a href='#' class='btn btn-success'>Buy Now</a></p>
            </li>
          </ul>
        </div>
      </div>
      <a data-slide='prev' href='#myCarousel' class='left carousel-control'>‹</a>
      <a data-slide='next' href='#myCarousel' class='right carousel-control'>›</a>
    </div>
  </div>
</div>

</body>
</html>
body { background: url(bglight.png); margin: 50px 0; }
.span3 {
  width: 166px;
}
.thumbnails {
  margin-left: -20px;
  list-style: none;
  *zoom: 1;
}
.thumbnails:before,
.thumbnails:after {
  display: table;
  content: "";
  line-height: 0;
}
.thumbnails:after {
  clear: both;
}
.row-fluid .thumbnails {
  margin-left: 0;
}
.thumbnails > li {
  float: left;
  margin-bottom: 20px;
  margin-left: 20px;
}

.thumbnail {
  width: 260px;
  height: 180px;
  overflow: hidden;
  border: 0;
  box-shadow: 0 12px 12px -10px #c4c4c4;
  -webkit-box-shadow: 0 17px 22px -20px #c4c4c4;
  -moz-box-shadow: 0 12px 12px -10px #c4c4c4;
}

/*.thumbnail img { width:100%; height:auto; }*/
.thumbnails p {
  text-align: center;
  padding: 10px;
}
	  
.row-fluid {
  width: 100%;
  *zoom: 1;
}
.row-fluid:before,.row-fluid:after {
  content: "";
  display: table;
  line-height: 0;
}
.row-fluid:after { clear: both; }

.row-fluid [class*="span"] {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin-left: 2.7624309392265194%;
    *margin-left: 2.709239449864817%;
}

.row-fluid [class*="span"]:first-child { margin-left: 0; }

.row-fluid .controls-row [class*="span"] + [class*="span"] {
    margin-left: 2.7624309392265194%;
}

.row-fluid .span3 {
    width: 22.92817679558011%;
    *width: 22.87498530621841%;
  }
.well { background-color: #fff; }
.well-large {
  border-radius: 6px;
  padding: 24px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}
<script src='//code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script>
  $(document).ready(function() {
    $('.carousel').carousel();
  });
</script>