[TUTORIAL] Crear carrusel-slide de imágenes

**Doodleo** · 17/07/2011, 23:24

Primero de todo, tenemos que crear dos archivos, a uno lo llamaremos jquery.js y a otro cycle.js

Los tienes creados? Bien, pues ahora abre el archivo jquery.js para pegar este código (y una vez pegado, lo guardas y cierras el archivo jquery.js)

Código:

El archivo tienes que descargarlo y subirlo, si no no funciona, lo adjunto en el tema y lo puedes descargar!

Bien, ahora ciérralo y abre el archivo cycle.js para pegar el siguiente código:

Código:

El archivo tienes que descargarlo y subirlo, si no no funciona, lo adjunto en el tema y lo puedes descargar!

Ya pegaste el código y lo guardaste? Vale, ahora cierra el archivo, y abre el archivo html donde quieres poner el carrusel, lo tienes abierto ya? perfecto!

Pega entre <head> y </head> estos tres códigos:

Código:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cycle.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('.carruseldeimagenes').cycle({
        fx: 'fade'
    });
});
</script>

Bien, los tienes? Ahora busca donde quieres poner el carrusel, donde lo quieras poner pega el siguiente código:

Código:

<div class="carruseldeimagenes">
<img src="URL DE LA IMAGEN" alt="TEXTO" /> 
<img src="URL DE LA IMAGEN" alt="TEXTO" />
<img src="URL DE LA IMAGEN" alt="TEXTO" />
<img src="URL DE LA IMAGEN" alt="TEXTO" />
<img src="URL DE LA IMAGEN" alt="TEXTO" />
</div>

Vale, ves las dos partes que están en verde? Eso puedes dejarlo, pero si por ejemplo quieres cambiar el nombre y llamarlo por ejemplo carrusel, deberías borrar lo que está en verde en los dos códigos y poner el mismo nombre en los dos códigos, oki? Mejor déjalo así, que no hay ningún problema jeje

Ahora, ves donde pone URL DE LA IMAGEN en rojo, eso lo tienes que cambiar y poner la URL de la imagen que quieres que aparezca, simple, no? Luego además pone alt="TEXTO", eso de TEXTO lo tienes que cambiar por algo relacionado con la imagen y tu página, preferiblemente que contenga las palabras que pusiste en el <meta name="keywords" ... porque así estarás mejor posicionado en los buscadores.

Si quieres agregar más imágenes, sólo agrega otro código de imagen (<img src="URL DE LA IMAGEN" alt="TEXTO" />)

Y si quieres quitar imágenes sólo borra el código de la imagen jeje

Aquí tenéis un ejemplo: http://doodleo.net84.net/carrusel.html

Y aquí tenéis los archivos jquery.js y cycle.js
archivos.zip

**Rabs** · 18/07/2011, 07:36

Como siempre, excelente :P

**Doodleo** · 18/07/2011, 13:21

Gracias Rabs jeje, aunque me pone lo que te ponía a ti de que se está revisando el sitio, esperemos que no tarden

PD: Felicidades Rabs, ya somos dos con dos cuadrados verdes

**Rabs** · 18/07/2011, 13:25

Es verdad hehe. De nada XD

**nosabernada** · 26/07/2011, 09:01

Podeis poner cada imagen con un enlace diferente, y tambien todas con el mismo :)

Os echare una mano en una cosita. En el archivo cycle.js, buscar esta linea:

" while((opts.timeout - opts.speed) < 250) // sanitize timeout "

Yo la tengo en la linea 312

Cambiar el 250 por el 5000 por ejemplo, y os ira mas lento, o ponerle menos, en fin, para editar el tiempo.

Luego le pegare un vistazo, a ver si encuentro como poner tipos de transiciones :P

Buen aporte

Un saludo.

**nosabernada** · 26/07/2011, 09:16

Y mira, otra cosa que os puede molar, poner esto en la hoja de estilos:

.carruseldeimagenes img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

Veréis como mola :D

**Doodleo** · 26/07/2011, 11:53

Claro, por supuesto que se puede modificar, por ejemplo con esos css que has puesto se redondearán los bordes las imágenes (no lo he probado, pero sólo con ver esas líneas reconozco qué hace jejejeje)

Gracias por estos aportes nosabernada jeje

**ricarducho** · 11/08/2011, 20:40

buenas noches por favor hecharme una mano las imagenes estan para abajo adjunto unas capturas de pantallas para ver donde esta el problema. todo esto es mi pagina de pruebas
Ricarducho

Uploaded with ImageShack.us

**Doodleo** · 12/08/2011, 10:45

Por lo que veo tienes el jquery.js y el cycle.js en carpetas distintas, tienes que poner los dos archivos (archivos, no carpetas) en la misma carpeta donde quieres el carrusel

**ricarducho** · 12/08/2011, 12:01

gracias pero perdona mi desconocimiento, poner los dos archivo en una carpeta por ejemplo donde quiero el carrusel seria en "nuestros servicios" por favor me podrias explicar, no entiendo.

un saludo

Ricarducho

**Doodleo** · 12/08/2011, 12:10

Por lo que vi estás poniendo el carrusel en plantilla.html, y plantilla.html está en la carpeta mi-ejemplo

Entonces lo que tienes que hacer es quitar el archivo jquery.js y el cycle.js (los archivos, no las carpetas como lo tienes ahora) y ponerlas en mi-ejemplo

**ricarducho** · 12/08/2011, 12:39

e puesto como me has explicado pero sigue sin funcionar no se donde lo hago mal. te adjunto una captura de pantalla

Uploaded with ImageShack.us

**Doodleo** · 12/08/2011, 13:18

Pega aquí TODO el código que tienes en plantilla.html

Pégalo, no una captura, oki?

**ricarducho** · 12/08/2011, 14:43

vale ahia esta la plantilla y gracias
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>RESTAURANTE PERLA ECUATORIANA</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/cycle.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('.carruseldeimagenes').cycle({

fx: 'fade'

});

});

</script>

</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo1.gif" width="798px" height="85px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
</div>
<div id="navegacion"><ul><li><a href="../quienes-somos/quienes-somos.html"><B>Quienes Somos</B></a></li><li><a href="../donde-estamos/donde-estamos.html"><B>Donde Estamos</B></a></li><li><a href="../nuestros-servicios/nuestros-servicios.html"><B>Nuestros Servicios></B></a></li><li><a href="../fotos-de salon/fotos-de salon.html"><B>Fotos de Salon</B></a></li></ul>
</div>

<div id="contenido">


<h1>SOMOS ESPECIALISTAS EN COMIDA ECUATORIANA</h1>
<div class="carruseldeimagenes">
<img src="objetos/imagen1.jpg" height="321" width="480" alt="MENESTRA "/>
<img src="objetos/imagen2.jpg" height="321" width="480" alt="ENCEBOLLADO" />
<img src="objetos/imagen3.jpg" height="321" widht="480" alt="ENCOCADO" />
<img src="objetos/imagen4.jpg" height="321" widht="480" alt="GUATITA" />
<img src="objetos/imagen5.jpg" height="321" width="480" alt="CALDO DE BOLAS" />
</div>
<center><B>Disfruta de la mejor comida tipica ecuatoriana a precios ANTICRISIS, Fritada, Guatita , Caldo de Patas, Ceviches de Concha y Camarón, Bandera y muchos más.! TE ESPERAMOS !</B></center>
<h1>REALIZAMOS TODO TIPO DE RECEPCIONES, SOLICITA TU PRESUPUESTO</h1>
<h1>Llegamos más cerca de ti servicio a domicilio GRATUITO: Teléfonos 91 528 52 32 / 645 355 819</h1></div>

<div id="pie"><h2>MENU DE LUNES A VIERNES A 6,90 EUROS</h2></div>

<div id="curva-inferior"></div>
</div>
</body>
</html>

**Doodleo** · 12/08/2011, 15:13

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type> 
<title>RESTAURANTE PERLA ECUATORIANA</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> 
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="cycle.js"></script>

<script type="text/javascript"> 

$(document).ready(function() {

$('.carruseldeimagenes').cycle({

fx: 'fade'

});

});

</script> 

</head>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo1.gif" width="798px" height="85px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
</div>
<div id="navegacion"><ul><li><a href="../quienes-somos/quienes-somos.html"><B>Quienes Somos</B></a></li><li><a href="../donde-estamos/donde-estamos.html"><B>Donde Estamos</B></a></li><li><a href="../nuestros-servicios/nuestros-servicios.html"><B>Nuestros Servicios></B></a></li><li><a href="../fotos-de salon/fotos-de salon.html"><B>Fotos de Salon</B></a></li></ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
<div id="contenido">
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
<h1>SOMOS ESPECIALISTAS EN COMIDA ECUATORIANA</h1>
<div class="carruseldeimagenes">
<img src="objetos/imagen1.jpg" height="321" width="480" alt="MENESTRA "/> 
<img src="objetos/imagen2.jpg" height="321" width="480" alt="ENCEBOLLADO" />
<img src="objetos/imagen3.jpg" height="321" widht="480" alt="ENCOCADO" />
<img src="objetos/imagen4.jpg" height="321" widht="480" alt="GUATITA" />
<img src="objetos/imagen5.jpg" height="321" width="480" alt="CALDO DE BOLAS" />
</div>
<center><B>Disfruta de la mejor comida tipica ecuatoriana a precios ANTICRISIS, Fritada, Guatita , Caldo de Patas, Ceviches de Concha y Camarón, Bandera y muchos más.! TE ESPERAMOS !</B></center>
<h1>REALIZAMOS TODO TIPO DE RECEPCIONES, SOLICITA TU PRESUPUESTO</h1>
<h1>Llegamos más cerca de ti servicio a domicilio GRATUITO: Teléfonos 91 528 52 32 / 645 355 819</h1></div>
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie"><h2>MENU DE LUNES A VIERNES A 6,90 EUROS</h2></div> 
<!-- FIN CODIGO PIE DE PAGINA -->
<div id="curva-inferior"></div>
</div>
</body>
</html>

Prueba con ese y si no funciona probablemente es porque tienes que subirlos al servidor para que se vea correctamente