Share
Una de las muchas funciones útiles de Twitter Bootstrap es un agradable carrusel deslizante para presentar imágenes y contenido. La instalación no es difícil. Requiere un marcado estructurado, el complemento Bootstrap jQuery y un par de líneas de JavaScript para inicializarlo. Déjame mostrarte cómo se hace!
Alternativamente, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes o YouTube!
Para aquellos de ustedes que aprecian los tutoriales en blanco y negro, repasemos:
El carrusel Bootstrap requiere un patrón de marcado específico, con clases apropiadas.
‹ ›
Texto de subtítulos aquí
Texto de subtítulos aquí
Texto de subtítulos aquí
Texto de subtítulos aquí
Una vez que hemos suministrado el marcado, debemos inicializar el JavaScript del carrusel para hacer su trabajo en este carrusel..
Comencemos por asegurarnos de que el JavaScript necesario esté conectado a esta página. Encontrará sus enlaces de JavaScript cerca de la parte inferior de la página, cerca de la etiqueta de cierre del cuerpo.
La forma mejor y más recomendada de vincular jQuery es vincular a una versión alojada en CDN. Esto proporciona una descarga más rápida y puede que ya esté en caché en el navegador de su usuario.
Pero, por supuesto, sería bueno tener un respaldo, de modo que si algo le sucede a esa versión alojada en CDN, el usuario puede obtenerlo localmente desde los archivos de su propio sitio. Eso es exactamente lo que recomiendan las buenas personas en HTML5 Boilerplate, y se ve así:
Tenga en cuenta que la primera línea llega a la versión alojada de Google. La segunda línea usa JavaScript para verificar que la primera línea hizo su trabajo. Si no, genera automáticamente un enlace a su propia copia alojada de jQuery, que ha incluido en sus propios archivos del sitio (como lo he hecho aquí).
Una vez que hemos vinculado jQuery, necesitamos los complementos de jQuery de Bootstrap. He incluido la versión compilada y minificada completa de todos los complementos de Bootstrap. Así mi enlace se ve así:
Una vez que hemos proporcionado los complementos de jQuery plus Bootstrap, solo tenemos que inicializar el complemento de Carrusel para hacer su trabajo en nuestro carrusel.
En inglés simple, esto significa: Una vez que el documento HTML esté listo, identifique los elementos con una clase de "carrusel", y dirigir el plugin del carrusel para que haga lo suyo..
Una vez que el marcado esté en su lugar, y el JavaScript se haya suministrado correctamente, debería poder actualizar su navegador y ver los resultados. Cada rotación de imagen lleva cinco segundos. Asegúrese de que su mouse no se desplace sobre la presentación de diapositivas, ya que esto detiene su temporizador.
Puede agregar parámetros para ajustar el tiempo entre el comportamiento de deslizamiento del carrusel.
Por ejemplo, podría cambiar el tiempo a intervalos de 2 segundos (2,000 milisegundos) de la siguiente manera:
En el marcado para el Paso 1, arriba, he usado imágenes de Placehold.it. Tenga en cuenta que las imágenes de 1200 píxeles de ancho son lo suficientemente grandes como para estirar el ancho máximo total del sitio de respuesta estándar de Bootstrap. He utilizado una proporción de 1200x480 px simplemente porque me parece visualmente agradable, al menos en mi monitor grande!
En este punto usted es libre de:
Siempre recuerde, cuando pruebe cosas y las modifique, la excelente documentación de Twitter Bootstrap es su amigo. Y si puede usar ayuda adicional, muchas personas encuentran ayuda en el Grupo de Google Twitter Bootstrap.
Echa un vistazo al resultado final..
Accentsconagua
