carousel leaving pixels after moving

Question

I have made a controllable carousel with the following code.

HTML

      <div id = "blanket">
            <div id = "carousel">
                <img id = "cr" src = "img/cr.png"/>
                <img id = "te" src = "img/te.png"/>
                <img id = "mi" src = "img/mi.png"/>
                <img id = "ga" src = "img/ga.png"/>
                <img id = "ro" src = "img/ro.png"/>
            </div>
        </div>

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 & GSAP included)

$(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});
}

The problem is that the carousel does not move in sync with the images ie. some pixels of the previous image creep into the next pane. What to do?

Which exact browser version and all JavaScript libraries which you use? — Aaron Digulla, Sep 30 '14 at 12:15
i am developing on chrome 37.0.2062.124 m with GSAP(tweenlite, CSSplugin, easepack) and jQuery 2.1. — bluefog, Sep 30 '14 at 12:17
[link](http://jsfiddle.net/m7vjs3gy/) - jSfiddle Note the pixels on the left at the 3rd pane. — bluefog, Sep 30 '14 at 12:29

bluefog · Accepted Answer · 2015-01-16T10:07:46.770

Found a solution by tinkering with the CSS. Initially all the images were not stacked side by side even after giving the rule margin:0. So I gave a negative margin and also increased the size of the containing div ie. carousel to account for the negative margins.

So the images were stacked and did not overflow to the adjacent panes.

The jSfiddle has been edited.

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

EDIT : Just became aware of the fact that line breaks and other whitespace in HTML makes inline elements have invisible margins. To effectively remove the invisible margins, clean up the whitespace, as has been done in the fiddle : http://jsfiddle.net/m7vjs3gy/3/

carousel leaving pixels after moving

1 Answers1

Linked