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.12/08/2012
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
Ver módulo Carousel de Productos para Prestashop 1.5.x
2 comentarios
Nube de etiquetas
Daniela
Publicado el 13/07/2021 21:39Me puedes ayudar a hacerlo responsive por favor? que dependiendo la pantalla se muestren 3 o 1 item.
Jose Aguilar
Publicado el 14/07/2021 15:18Hola,
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