Como crear un carrusel de fotos jQuery muy simple

Le hicimos algunos cambios al plugin para agregar el paginador y mostrar las fotos, sitase libre de adaptar el ejemplo a su gusto.


<style type="text/css">
<!--
body {margin:0; padding:0; background:#fff;}
#slidebox{position:relative; border:1px solid #ccc; margin:40px auto;overflow:hidden;}
#slidebox, #slidebox ul {width:600px;height:300px;}
#slidebox, #slidebox ul li{width:600px;height:300px;}
#slidebox ul li{position:relative; left:0; background:#eee; float:left;list-style: none; padding:15px 28px; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:21px; height:21px;top:139px;}
#slidebox .next{right:0; margin-right:10px; background:url(slidebox_next.png) no-repeat left top;}
#slidebox .next:hover{background:url(slidebox_next_hover.png) no-repeat left top;}
#slidebox .previous{margin-left:10px; background:url(slidebox_previous.png) no-repeat left top;}
#slidebox .previous:hover{background:url(slidebox_previous_hover.png) no-repeat left top;}
#slidebox .thumbs{position:absolute; z-index:2; bottom:10px; right:10px;}
#slidebox .thumbs a{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px; background:url(slidebox_thumb.png); color:#fff;}
#slidebox .thumbs a:hover{background:#fff; color:#000;}
#slidebox .thumbs .thumbActive{background:#fff; color:#000; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px;}
-->


<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="jcarousellite_1.0.1c5.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
$("#slidebox").jCarouselLite({
vertical: false,
hoverPause:true,
btnPrev: ".previous",
btnNext: ".next",
visible: 1,
start: 0,
scroll: 1,
circular: true,
auto:1000,
speed:500,
btnGo:
[".1", ".2",
".3", ".4"],

afterEnd: function(a, to, btnGo) {
if(btnGo.length <= to){
to = 0;
}
$(".thumbActive").removeClass("thumbActive");
$(btnGo[to]).addClass("thumbActive");
}
});
});
</script>

<div id="slidebox">
<div class="next"></div>
<div class="previous"></div>
<div class="thumbs">
<a href="#" onclick="" class="1">1</a>
<a href="#" onclick="" class="2 thumbActive">2</a>
<a href="#" onclick="" class="3 ">3</a>
<a href="#" onclick="" class="4">4</a>
</div>
<ul>
<li>content 1</li>
<li>content 2</li>
<li>content 3</li>
<li>content 4</li>
</ul>
</div>
Autor: scriptbreaker - Fuente

Enlaces patrocinados:



Comentarios

balles:
2011-10-21 12:10:40

gracias vi su ejemplo y me gusto mucho, espero que me sirva, gracias por su aportación y labor

Latinbooker:
2011-10-31 22:10:39

Excelente son de gran ayuda para quienes estamos comenzando en este fascinante mundo

Watson:
2011-11-10 10:11:31

Hola! Por favor, alguien me podría decir que parámetros hay que cambiar para que funcione el paginador con 2 imágenes. El problema es que cuando pasa del 2 y regresa al 1 no se activa el número (color blanco). En cambio si lo clicko si funciona, pero automáticamente no. Gracias.

Sara:
2012-01-01 13:01:36

El ejemplo se ve muy bonito, gracias por su aportación, lo voy a probar espero me funcione.

zuyu:
2012-02-07 18:02:04

no entiendo eso donde lo voy a colocar y como le pongo mis imagenes explicame por favor

Poncho:
2012-03-26 21:03:28

gracias

gio:
2012-05-15 21:05:37

ya lo adapte ami sitio pero no puedo agregar imagenes podrian ayudarme para ver que hay que cambiar y que parametros modificar

yennit:
2012-05-25 18:05:25

gracias por los codigos, nos ha ayudado demasiado... :D

JPintor:
2012-06-06 04:06:13

Realmente bueno y simplificado, ideal para los novatos como yo

miguel:
2012-06-28 14:06:07

que bueno est esta ayuda

Cristian:
2012-08-08 01:08:04

donde dice content 1; content 2; content 3; content 4 colocas la ruta de tus imagenes de esta forma

Tatiana:
2013-01-12 16:01:08

Que coordenadas tengo que mover para que la imagen me inicie en todo el borde??, es que me aparece ubicada mas allá del primer botón. Por favor ayudenme!

Freddy Meza:
2013-01-29 00:01:55

Exelente!! muchas gracias. Lo andaba buscando.

Ghearly:
2013-02-07 08:02:27

Excelente carrusel, sencillo pero vistoso, y facil de ajustar... Gracias

Gackt:
2013-03-15 10:03:17

Muy buen tutorial.

Andrés Silva:
2013-05-29 17:05:09

En qué parte del código se pueden vincular o cambiar las imagenes del carrusel? gracias x el dato

jose alejandro:
2013-06-19 13:06:29

disculpa me marca un error a la hora de cargar la pagina
Error en tiempo de ejecución de JavaScript: '$' no está definido.
es en la function de jQuery...
Gracias.
Saludos

Jake:
2013-09-21 08:09:15

No consigo qe aparezcan las imagenes, necesito ayuda. Donde pongo la ruta de las imagenes y donde guardo las imagenes?

Sisco:
2013-10-12 04:10:28

Fantástico. Justo lo que buscaba, muy bien explicado y muy sencillo. Mil gracias

hugo:
2014-01-13 00:01:41

Hola. Este carrusel sirve para todos las versiones de explorer. Gracias por su atencion

William Martínes:
2014-01-16 17:01:18

Hola

Soy muy muy novato en programación y tengo la misma pregunta de Andrés Silva:

En qué parte del código se pueden vincular o colocar las imágenes del carrusel?

Quedo muy atento

Gracias

francisco lopez:
2014-03-04 19:03:56

muchas gracias excelente aporte

nicolas:
2014-07-07 15:07:09

como puedo agregar botones que cambien la foto del slide?

gustavo:
2014-07-24 23:07:19

Yo agrego la ruta para mirar la imagen y no me muestra nada, le introdusco un width para hacer mas ancha la imagen y me aparece como si la hubicacion estuviera rota, puse una ruta en el lugar fuera de rutas, y tampoco funciona, alguien que me ayude.

<ul>
<li><img src="2.jpg" /></li>
<li><img src="../img/2.jpg" /></li>
<li>content 3</li>
<li>content 4</li>
<li>content 5</li>
</ul>

ese es mi código modificado.

Victor:
2015-01-16 04:01:13

Estimados.
Para los que aun no pueden poner las imágenes..pongo el ejemplo

Esto es lo que va dentro de Li:

<li><img alt="" src="nombredelaimagen.png" width="600" height="276" /></li>

Deben poner algo parecido y ajustar el tamaño de la imagen.. para que no se vea distorsionada. Saludos

Jeancarlos:
2015-01-26 15:01:04

Si funciona muchas gracias pero por favor, ¿cómo podría hacerlo responsive? Agradecería mucho que alguien me ayude gracias.

Magali:
2015-02-26 14:02:36

Hola! Funciona correctamente. Pude agregar las imágenes y cambiarle el tamaño a la galería. El único problema con el que me encontré es que utilice mas de 4 imágenes, agregué los botones de abajo que me faltaban, pero solo cambia el numero hasta el 4 y tengo 9 imágenes. Tendría que cambiarle algo del JS, no?

Gracias por el aporte.

david_word:
2015-10-02 12:10:03

Gracias por el código. Espero aprender mucho de él.

Javier:
2017-01-24 19:01:50

Hola, disculpen en que sección debo de colocar este codigo?

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

Ultimos Comentarios

fendergx dijo:

Gracias por el ejemplo

Positive Radio Reggae dijo:

Lo voy a implementar en mi web, es excelente .. lo estuve revisando. no lo encontraba y al finn thanksssss https://www.radioreggaepositive.com/ https://play.google.com/store/apps/details?id=laradio.online.radioreggaepositiveok PRR ...

David Soler dijo:

HiMarghoob Suleman In your jQuery Common Accordion - Horizontal & Vertical blog, you paste a link to carrousel: https://github.com/marghoobsuleman/jquery-carousel/archive/master.zip but ...

elalngel dijo:

me ayudo bastante, gracias

Erick Salas dijo:

Buenas..Tengo un pequeño problema para descargar el script, al entrar en el enlace solo me muestra una pagina en blanco ...

noe dijo:

buenas tardes quiciera aprender a hacr filtros de imagenes en mi pagina web

SyntaxHighlighter.config.stripBrs=true;