twitter-bootstrap => Carruseles

Observaciones

Para obtener más información, visite la documentación oficial en http://getbootstrap.com/javascript/#carousel , donde se derivan ejemplos e información de uso de HTML básico y Javascript.

Cabe señalar que los carruseles no funcionan correctamente en IE 9 y anteriores debido al uso de transiciones / animaciones CSS3.

Uso básico de HTML

Un carrusel Bootstrap es un componente de Bootstrap que crea una presentación de diapositivas que recorre los elementos dentro del carrusel.

Aquí hay un ejemplo de uso de HTML básico:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Uso básico de Javascript e inicialización.

Los componentes del carrusel se pueden instanciar a través de jQuery con la función $('.carousel').carousel(options) , donde $('.carousel') es una referencia de nivel superior al carrusel específico y options es un objeto de Javascript que especifica el carrusel atributos por defecto.

El objeto de options permite que se definan múltiples propiedades, lo que afectará el comportamiento del carrusel. Estas propiedades se definen como tales:

La propiedad de interval acepta un tipo de number Javascript que permite a un usuario definir la cantidad de tiempo durante el cual el carrusel muestra una diapositiva de carrusel determinada. Si se especifica el valor booleano false , el carrusel no realizará un ciclo automáticamente.
La propiedad de pause acepta un tipo de string Javascript que alterna el comportamiento donde el ciclo automático del carrusel se detiene cuando el mouse del usuario ingresa al carrusel. El valor predeterminado (y único) aceptado es "flotar".
La propiedad de wrap acepta un tipo boolean Javascript que permite a un usuario definir si desea que el carrusel realice un ciclo continuo sin detenerse en una diapositiva determinada.
La propiedad del keyboard acepta un tipo boolean Javascript que permite a un usuario definir si desea que el carrusel responda o no a los eventos del teclado.

Aquí hay un ejemplo del uso básico de Javascript:

$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });

Al igual que con otros componentes de Bootstrap, las opciones del carrusel también se pueden especificar en HTML a través de atributos de datos.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

twitter-bootstrap
Carruseles

Buscar..

Observaciones

Uso básico de HTML

Uso básico de Javascript e inicialización.