[TUTORIAL] Crear carrusel-slide de imágenes

**Doodleo** · 08/01/2012, 21:03

Hola,

respecto a la primera, ni idea. Creo que no se puede a menos que el usuario los permita :S

A la segunda, mira este post que puso johnpeterpj arriba:

En la sección de opciones, podrás ver algunas de las siguientes variables y parámetros:

Speed: Velocidad de transición de las imágenes. por ejemplo el valor 1000, indica un segundo entre cada pase de imagen.
slideREsize: Opción para redimensionar las imágenes.
randomizeEffects: Opción para generar los efectos de transición en forma aleatoria.
pauseOnPagerHover: Para detener o pausar el efecto de transición cuando el usuario coloque el mouse encima del gráfico.
Height y Width: Alto y ancho del contenedor de las imágenes.
fx: Nombre del efecto que se utilizará. Si no se especifica, se utilizará el efecto de tipo Fade. Nota: para utilizar todos los efectos disponibles, se puede pasar a este argumento, el valor ALL.

La línea 798 del código dice:

Código:

speed:1000, // speed of the transition (any valid fx speed value)

Y si te sirve un par más arriba el tipo de transición.

Saludos.

A la tercera, cuando añades imágenes hazlos como un enlace normal:

Código:

<a href="URL A LA QUE IRÁ"><img src="URL DE LA IMAGEN" /></a>

Y si prefieras que la página se abra en otra pestaña:

Código:

<a href="URL A LA QUE IRÁ" target="_blank"><img src="URL DE LA IMAGEN" /></a>

**Rod** · 20/01/2012, 15:13

Hola! Miles y miles de gracias, me has ayudado increiblemente!!!! Soy un novato en esto y estaba a punto de volverme loco! He seguido los pasos de como crear tu web hace unos meses, y habia llegado al tope con esto de los slides. Gracias! je

**laraurkiola** · 06/02/2012, 19:00

¡Hola!

Estoy intentando que me funcione el script pero me aparecen las imágenes una debajo de la otra. El div está dentro de una tabla, ¿puede ser por eso? Y no he cogido este JQuery.js porque ya tengo uno actualizado: jquery-1.5.2.js (es que si no se juntan una de JQuerys...). ¿Sabes por qué puede ser que me pase esto?

Gracias de antemano :)

**Doodleo** · 12/02/2012, 22:21

Hola laraurkiola,

Has probado a poner el otro jQuery? Alomejor es por eso... pruébalo y nos cuentas!

@Rod: Me alegro de que te haya gustado :D

**Ulises31** · 28/02/2012, 19:34

Hola Doodleo!!

El carrusel funciona perfectamente, pero intento ponerle el titulo "Fotos" arriba de la pagina pero no hay manera tio, añado un div, pero nada. Te dejo el codigo a ver si me hechas.

<!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>Fotos</title>
<link rel="stylesheet" href="reset.css" media="all" />
<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">
<div id="menu-izquierdo"><h3>Zona Artistica</h3>
<ul>
<li><a href="noticias.html">Noticias</a></li><li><a href="biografia.html">Biografía</a></li><li><a href="discografia.html">Discografía</a></li><li><a href="fotos.html">Fotos</a></li><li><a href="videos.html">Videos</a></li><li><a href="actuaciones.html">Actuaciones</a></li><li><a href="contratacion.html">Contratación</a></li>
</ul>
</div>
<div class="carruseldeimagenes">
<img src="objetos/con_paco.png" alt="Con el Maestro" />
<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>
<div id="menú-derecho">
<ul id="lista-cursos"><h3>Clases Magistrales</h3>
<li><a href="concepto.html">¿Qué son?</a></li><li><a href="login.html">Identifícate</a></li><li><a href="registro.html">Registro</a></li><li><a href="principiantes.html">Principiantes</a></li><li><a href="avanzados.html">Avanzados</a></li><li><a href="preguntas.html">Ruegos y Dudas</a></li>
</ul>
</div>
<div id="pie">
<div id="pieuno"><a href="pantilla.html">Menú Principal</a></div>
<div id="piedos"><a href="email.html">Contacto-Email</a></div>
<div id="pietres"><a href="cuento.html">Cuento del Arte</a></div>
</div>
</div>
</body>
</html

el titulo quiero que quede como en esta pagina, pero no hay forma, te dejo un pantallazo para que veas como quiero el titulo:

**Ulises31** · 28/02/2012, 19:40

....ah tambien me gustaria cambiar el tamaño de las imagenes, me he ido a las opciones de cycle.js pero nada. Gracias mostro!!!

**Doodleo** · 03/03/2012, 19:21

Hola Ulises,

Para el problema del title, prueba a cambiar la línea que define el iso-8859-1 por esta a ver si es por eso:

Código:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Para lo de cambiar el tamaño de las imágenes, en el código de las imágenes tienes que hacer esto:

Código:

<img src="objetos/con_paco.png" alt="Con el Maestro" style="width: XXpx; height: XXpx;" />

Donde width es el ancho y height el alto.

Saludos

**liaMestre** · 11/03/2012, 07:44

tengo problemas para que el carrusel se vea en la tablet y mobil. me podeis hechar una mano, plis?? muchas gracias! :)

**taz** · 31/03/2012, 05:42

soy nuevo acá, si me pueden ayudar funciona todo bien, pero IE se ven las imagenes juntas y se desconfigura la imagen alguien sabe como solucionar ese inconveniento o por defecto que detecte que el usuario esta navegando con IE y solo muestre una imagen??

muchas gracias.