Problema con las imágenes dentro de un Cycle de JQuery

belencruzp · #1 (**permalink**) 16/01/2012, 15:39

Hola chicos, necesito ayuda con un pequeño problema que me está dando el Cycle. Primero que nada, que sepan que lo he sacado de aquí: http://jquery.malsup.com/cycle/pager11.html

Ya luego de personalizarlo me funciona perfectamente, el problema está en que en el transcurso de una imagen a la otra hay como un espacio de 2px o algo así y no es constante. Tampoco quiero que lo sea, realmente! El tema es que quiero que no se vea ese espacio entre una imagen y la otra... Les copio/pego la info que tengo en mis códigos, pero de todas maneras no hay nada distinto a lo que está en el enlace que os pasé arriba (a excepción de los botones next y prev).

Espero que me puedan ayudar y decirme en dónde está el error, qué falta o qué sobra en el código!!

Gracias de antemano por la ayuda y haber pasado por este tema :D

HEAD HTML

Código:

<head>
   	   <title>MYAA</title>		
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <link type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
	   <link href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" rel="stylesheet" />
		
   	   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   	   <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.cycle.all.js"></script>		
   		
	   <script type="text/javascript" defer="defer">
	   	$(function(){
			$('.slideshow-controles').cycle({
		        fx:      'scrollHorz',
		        timeout:  0,
		        prev:    '#prev',
		        next:    '#next',
		        pagerAnchorBuilder: pagerFactory
    		});

    	function pagerFactory(idx, slide) {
        var s = idx > 2 ? ' style="display:none"' : '';
        return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
   	 };	
		});
	   </script>
     
    </head>

CSS

Código:

#controles{
	width:870px;
	height:40px;
	margin-left:15px;
	position:absolute;
	top:205px;
	z-index:9999;
}
#slideshow-controles img{
	margin:0;
	padding:0;
	display: block;
}

HTML

Código:

<div id="slideshow-controles" class="slideshow-controles">
		<img src="<?php echo get_template_directory_uri(); ?>/img/01.jpg" />
		<img src="<?php echo get_template_directory_uri(); ?>/img/02.jpg" />
		<img src="<?php echo get_template_directory_uri(); ?>/img/03.jpg" />
		<img src="<?php echo get_template_directory_uri(); ?>/img/04.jpg" />
		<img src="<?php echo get_template_directory_uri(); ?>/img/05.jpg" />
		<img src="<?php echo get_template_directory_uri(); ?>/img/06.jpg" />
	</div>
<div id="controles">
		<a href="#"><span id="prev" class="fl"><img src="<?php echo get_template_directory_uri(); ?>/img/boton_prev.png" /></span></a>
		<a href="#"><span id="next" class="fr"><img src="<?php echo get_template_directory_uri(); ?>/img/boton_next.png" /></span></a>
	</div>