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

jhonydepp dijo:

excelente recurso gracias por compartirlo

monipodio dijo:

Tu pagina es un horror,... o no es compatible con Chrome, no pude ver absolutamente nada, ni código fuente ni demostrativo. ...

candy neyra dijo:

como puedo obtener el codigo para implementar

Ramesh Sampangi dijo:

Really nice post. I liked it. Keep sharing some more posts again quickly! <a href="https://aipatasala.com/courses/DS@HYD/Data-Science-Course-in-Hyderabad">Data ...

teja aswani dijo:

This is a well-written article. I read the material and found it to be extremely beneficial. Thank you for sharing this information. ...

Artificial Intelligence course in Chennai dijo:

I really enjoy every part and have bookmarked you to see the new things you post. Well done for this excellent article. Please ...

AWS Training in Hyderabad dijo:

Excellent pieces. Keep posting such kind of info on your blog. I?m really impressed by your site. <a href="https://www.kellytechno.com/Hyderabad/Course/amazon-web-services-training">AWS ...

www.amazon.com/mytv dijo:

<a href="https://sites.google.com/view/avgcomenusactivation/" rel="dofollow">avg.com/retail</a> <a ...

Brajput123 dijo:

<a href="https://www.amzoncamzon.com/"> Amazon.com mytv </a> - you merely unboxed a fresh ...

SyntaxHighlighter.config.stripBrs=true;