carrusel dejando píxeles después de mudarse

He creado un carrusel controlable con el siguiente código.


HTML


CSS

 #carousel{ height: 100%; width: 500%; } #carousel img{ position: relative; display: inline-block; height: 100%; width: 20%; border:1px solid white; } #blanket{ position: relative; display: inline-block; float: right; right: 5%; top:7%; height: 75%; width:64%; overflow: hidden; background: rgba(0,0,0,0.3); } 

jS (jQuery y GSAP incluidos)

 $(document).ready(function() { }) $(document).click(function() { var i = event.target.id; if(i=="yl"){ gets(0); } else if(i=="gt"){ gets(1); } else if(i=="br"){ gets(2); } else if(i=="rb"){ gets(3); } else if(i=="gb"){ gets(4); } }); function gets(i) { var off = -1 * (i * $('#carousel img').width()); TweenLite.to($('#carousel img'), 0.7 ,{left:off+"px",ease:Power2.easeOut}); } 

El problema es que el carrusel no se mueve en sincronización con las imágenes, es decir. algunos píxeles de la imagen anterior se deslizan al siguiente panel. ¿Qué hacer?

Encontré una solución modificando el CSS. Inicialmente, todas las imágenes no estaban astackdas una al lado de la otra, incluso después de dar el margin:0 la regla margin:0 . Entonces di un margen negativo y también aumenté el tamaño de la div contiene, es decir. carousel para tener en cuenta los márgenes negativos.

Entonces las imágenes se astackron y no se desbordaron a los paneles adyacentes.

El jSfiddle ha sido editado.

http://jsfiddle.net/m7vjs3gy/2/

EDITAR: Acabo de enterarme del hecho de que los saltos de línea y otros espacios en blanco en HTML hacen que los elementos en inline tengan márgenes invisibles. Para eliminar efectivamente los márgenes invisibles, limpie los espacios en blanco, como se ha hecho en el violín: http://jsfiddle.net/m7vjs3gy/3/