jsCarousel horizontal y vertical
En este artículo pretendemos hacer mención e ilustrar un ejemplo de un plugin jQuery que nos permite tener un caraousel de imágenes y contenido HTML tanto horizontal como verticalmente.
Los estilos son personalizables a través de la hoja de estilos CSS.
Opciones o parámetros:
- Orientation: para usar el slider horizontal hay que setear orientation en ‘h’ y para vertical en el valor ‘v’ por defecto es ‘h’.
- masked: valor booleano, setear masked en true si desea efecto de superposición por defecto viene en true.
- scrollspeed: Velocidad de scroll sobre las fotos por defecto viene en 500.
- delay: La demora en milisegundos entre foto y foto por defecto esta en 5000.
- itemstodisplay: cantidad máxima de items a mostrar por defecto 5
- autoscroll: si el slider va a pasar las fotos automaticamente por defecto es true.
- circular: comenzar nuevamente al terminar la ronda de fotos.
- onthumbnailclick: funcion de callback al hacer click sobre las fotos.
Para añadir este fantástico carousel a tu página Web deberás añadir la librería jQuery, el plugin, su llamada y los estilos necesarios en el <head> de tu página.
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jsCarousel-2.0.0.js" type="text/javascript"></script>
<link href="jsCarousel-2.0.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#carouselv').jsCarousel({
onthumbnailclick: function(src) {
alert(src);
},
autoscroll: true,
masked: false,
itemstodisplay: 3,
orientation: 'v'
});
$('#carouselh').jsCarousel({
onthumbnailclick: function(src) {
alert(src);
},
autoscroll: false,
circular: true,
masked: false,
itemstodisplay: 5,
orientation: 'h'
});
});
</script>
En este caso en la llamada estamos creando 2 carousels, uno vertical y otro horizontal con distintos parámetros u opciones.
Y en el <body> de tu página el contenido HTML del carousel:
<div id="carouselh">
<div>
<img alt="" src="images/img_1.jpg" /><br />
<span>Image Text</span>
</div>
...
</div>
La anterior porción de código tan solo muestra el código mínimo necesario para disponer del carousel horizontal. Los puntos suspensivos significan las iteraciones de la imagen y el texto que mostraremos en el carousel.
Como puedes observar podrías crear un carousel con el contenido HTML que se te antoje.
Ver ejemplos en funcionamiento
Descargar
Autor
¿Buscas trabajo de programador?
2 respuestas a “jsCarousel horizontal y vertical”
Deja una respuesta
63 artículos que te podrían interesar
Me puedes ayudar a hacerlo responsive por favor? que dependiendo la pantalla se muestren 3 o 1 item.
Hola,
Este plugin es antiguo y hacerlo responsive no será nada fácil.
Si todavía necesitas ayuda sería bueno que enviaras un ticket a nuestro centro de soporte técnico con tu petición para que podamos estudiarlo -> https://www.jamodules.com/es/soporte
Saludos