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>