Carrusel de contenidos horizontal y vertical con jQuery

jsCarousel v2.0 Parametros



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


Como usar jsCarousel Slider



En el Archivo HTML agregar la siguiente en la sección head

referencia a la libreria jQuery
jsCarousel-v2.0.0.js
jsCarousel-v2.0.0.css

Crear un elemento de bloque (div) en el body del html , asignarle un id por ejem 'jsCarousel'. luego agregar algunos divs debajo del elemento creado todos los primeros niveles (hijos directos) serán usados como los items a desplazar. sientase libre de agregar cualquier elemento que desee
En el código de mas abajo verá un ejemplo de como hacerlo, finalmente agregue el siguiente llamado javascript que genera finalmente el slider.


<script type="text/javascript">
$(document).ready(function() {
$('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });
});
</script>


Este es el ejemplo de la estructura html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Thumbnail/Content Slider: jsCarouselV2.0.0</title>

<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, masked: false, itemstodisplay: 5, orientation: 'h' });
$('#carouselhAuto').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });

});

</script>

<style type="text/css">
body
{
background-color: #2F2F2F;
padding-top: 40px;
}
#demo-wrapper
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
padding: 40px 20px 0px 20px;
}
#demo-left
{
width: 15%;
float: left;
}
#demo-right
{
width: 85%;
float: left;
}
#hWrapperAuto
{
margin-top: 20px;
}
#demo-tabs
{
width: 100%;
height: 50px;
color: White;
margin: 0;
padding: 0;
}
#demo-tabs div.item
{
height: 35px;
float: left;
background-color: #2F2F2F;
border: solid 1px gray;
border-bottom: none;
padding: 0;
margin: 0;
margin-left: 10px;
text-align: center;
padding: 10px 4px 4px 4px;
font-weight: bold;
}
#contents
{
width: 100%;
margin: 0;
padding: 0;
color: White;
font: arial;
font-size: 11pt;
}
#demo-tabs div.item.active-tab
{
background-color: Black;
}
#demo-tabs div.item.active-tabc
{
background-color: Black;
}
#v1, #v2
{
margin: 20px;
}
.visible
{
display: block;
}
.hidden
{
display: none;
}
#oldWrapper
{
margin-left: 100px;
}
#contents a
{
color: yellow;
}
#contents a:hover
{
text-decoration: none;
color: Gray;
}
.heading
{
font-size: 20pt;
font-weight: bold;
}
</style>
</head>
<body>
<div id="contents">
<div id="v2">
<span class="heading">jsCarousel V 2.0.0</span>
<p>
</a></p>
<div id="demo-wrapper">
<div id="demo-left">
<div id="vWrapper">
<div id="carouselv">
<div>
<img alt="" src="images/img_1.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_2.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_3.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_4.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_5.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_6.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_7.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_8.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_9.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_10.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_11.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_12.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_13.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_14.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_15.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_16.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
</div>
</div>
</div>
<div id="demo-right">
<div id="hWrapper">
<div id="carouselh">
<div>
<img alt="" src="images/img_1.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_2.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_3.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_4.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_5.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_6.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_7.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_8.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_9.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_10.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_11.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_12.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_13.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_14.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_15.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_16.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
</div>
</div>
<div id="hWrapperAuto">
<div id="carouselhAuto">
<div>
<img alt="" src="images/img_1.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_2.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_3.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_4.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_5.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_6.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_7.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_8.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_9.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_10.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_11.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_12.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_13.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_14.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_15.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
<div>
<img alt="" src="images/img_16.jpg" /><br />
<span class="thumbnail-text">Image Text</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Autor: egrappler - Fuente

Enlaces patrocinados:



Comentarios

cesar:
2012-04-15 18:04:41

excelente ejemplo gracias

luis rey:
2012-07-28 13:07:42

excelente buscaba este ejenplo por todos lados peno lo encontraba gracias

Electriko:
2012-11-20 14:11:23

Hola! soy nuevo en esto del Jquery, quisiera poner 2 carruseles uno arriba del otro es posible ??

josue:
2012-11-25 16:11:58

esta excelente

jose:
2013-08-08 14:08:35

me interesa aprender programacion

Tania:
2013-08-19 10:08:58

Puedo utilizar este código para implementarlo en mi página y no tenga ningún problema con los derechos de autor??????

Miriam:
2013-10-28 11:10:19

Hay un numero maximo de imagenes a mostrar?

rafa:
2014-07-31 00:07:40

Me gustaria me pudieras hechar una mano, el asunto es el siguiente: al intentar implentar una base de datos el carrusel no funciona, y me gustaria saber si se puede corregir eso.

raul:
2014-09-02 07:09:29

muy buen aporte es lo que estaba buscando. Graciaaaass

matias:
2017-04-07 22:04:07

Buenas tardes, estoy tratando de usar este carrusel, pero me muestra solo las imágenes que entran en el carrusel, si tengo mas imágenes me gustaría que las muestre igual, que vayan pasando!
espero explicar bien mi duda y espero una pronta respuesta! muchas gracias

Deje un Comentario
[Opcional]
(No se mostrará en el sitio)
[Opcional]
[Opcional]

Ultimos Comentarios

Javo dijo:

Excelente efecto, me encantó el Demo 2

SAMIR ROMERO dijo:

me facilitan el codigo de esa animacion por favor

UsuarioABCD dijo:

¿Hola que tal?

SyntaxHighlighter.config.stripBrs=true;