Tiny Carousel
Tiny Carousel es un carrusel de peso ligero para el deslizamiento de contenido o imágenes empleando para ello jQuery, HTML y CSS.
Por tanto, se puede personalizar totalmente mediante CSS y tiene posibilidades tales como carrousel horizontal y vertical, slider automático o manual, slider de uno o varios items, paginación o bullets, etc.
Su implementación es bien sencilla. Tan solo tienes que añadir en tu <head> el plugin + su llamada además de la librería jQuery y los estilos necesarios:
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel();
});
</script>
Y en el <body> la estructura HTML:
<div id="slider1"> <a href="#" class="buttons prev">left</a> <div class="viewport"> <ul class="overview"> <li><img src="images/picture6.jpg" /></li> <li><img src="images/picture5.jpg" /></li> <li><img src="images/picture4.jpg" /></li> <li><img src="images/picture3.jpg" /></li> <li><img src="images/picture2.jpg" /></li> <li><img src="images/picture1.jpg" /></li> </ul> </div> <a href="#" class="buttons next">right</a> </div>
Opciones del plugin:
- start: 1 — donde debe comenzar el carrusel?
- display: 1 — Número de items a mover a la vez
- axis: ‘x’ — vertical o horizontal slider? ‘x’ or ‘y’ .
- controls: true — mostrar los botones de navegación izquierda y derecha?
- pager: false — Números de item o bullets
- interval: false — mover automáticamente.
- intervaltime: 3000 — Movimiento cada x segundos.
- animation: true — false es instantánea, true es animado.
- duration: 1000 — Duración de la animación en milisegundos.
- callback: null — función que se ejecuta después de cada movimiento
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
2 respuestas a “Tiny Carousel”
Deja una respuesta
47 artículos que te podrían interesar
Gracias por tu aporte fue de mucha ayuda, bastante sencillo de implementar. La web en mi nick te muestra un ejemplo. Saludos desde Monterrey
Gracias por tu aporte fue de mucha ayuda, bastante sencillo de implementar. La web en mi nick te muestra un ejemplo. Saludos desde México.