Картинки по кругу. Пропадают отступы

[ufaclub]

Вот рабочая ссылка. Как первые 11 картинок пройдут зону видимости следующая идет уже без отступа.

Вот ссылка на пример:
http://jsfiddle.net/b5n00usm/

Вот код:

jQuery.noConflict();

jQuery(document).ready(function(){


jQuery('#scrolled img').addClass('vata');

    var hght = 100; // высота карусели
    speed = 1; // скорость прокрутки
    
         
    var imgs = jQuery("#scrolled > img");
    var scrl = jQuery("#scrolled");
    var crsl = jQuery("#carusel");
    wdth = 0;

    crsl.css({overflow:"hidden","height":hght});
    jQuery.each(imgs,function(index,value){
        wdth += (jQuery(imgs[index]).width());              
    })
    scrl.width(wdth);    
    
    function rightScroll(){
	
        var firstImg = jQuery("#scrolled > img:first");
        var lastImg = jQuery("#scrolled > img:last"); 
		
        var scroll = crsl.scrollLeft();
        crsl.scrollLeft(scroll + speed);
        if(scroll > firstImg.width()){
            crsl.scrollLeft(scroll - (firstImg.width()));
            firstImg.clone(true).insertAfter(lastImg);
            jQuery(firstImg).remove();
        }
    }
    crsl.mouseover(function(){
        clearInterval(timer);                      
    }).mouseout(function(){
        timer = setInterval(rightScroll,25);                   
    })
    timer = setInterval(rightScroll,25);
});

<div id="ja-slideshow">
      <div id="carusel" style="width:100%; margin: 0 0 0 3px; overflow:auto">  
<div id="scrolled">     
        
<img onclick="location.href='/kinoprostor';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/stories/demo/kinoprostor.gif" alt="Кинопростор"/>
    
    
<img onclick="location.href='/semeieniie-restoran-vkusnie-istorii';" style="cursor: pointer;" src="http://www.prostorufa.ru/i/vkus_mimi.png" alt="Ресторан «Вкусные истории»"/>
<img onclick="location.href='/sportmaster';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/sportmaste3r.gif" alt=" «Спорт Мастер» "/>
<img onclick="location.href='/mvideo';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/mvideo3.gif" alt=" «М.Видио» "/>
<img onclick="location.href='/dmir';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/dmir3.gif" alt=" «Детский мир» "/>
<img onclick="location.href='/letualshop';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/stories/demo/letual.gif" alt=" Магазин «Л'Этуаль»"/>
<img onclick="location.href='/zolla';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/zolla_m.gif" alt=" «Zolla» "/>
<img onclick="location.href='/skoroostin';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/resized/i/ostin_200_150.gif"  width="135" height="100"  alt="Магазин «Ostin»"/>

<img onclick="location.href='/letualshop';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/stories/demo/letual.gif" alt=" Магазин «Л'Этуаль»"/>
<img onclick="location.href='/zolla';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/zolla_m.gif" alt=" «Zolla» "/>
    
    
<img onclick="location.href='/skoroostin';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/resized/i/ostin_200_150.gif"  width="135" height="100"  alt="Магазин «Ostin»"/>



</div>     
</div>
    </div>

Не могу понять почему пропадает отступ и все картинки после 11 уже слипаются. Помогите понять в чем дело

[MallSerg]

изначально после каждой картинки идёт перевод строки что заставляет браузер вставлять отступ (иначе текст из разных строк будет слипаться в одну строку при определенных значениях css)
картинки инлайн элементы т.е. вставляются в документ так же как и обычный текст.
после того как картинку удаляется из начала и вставляется в конец перевод строку туда не вставляется следовательно и отступа нет.
проверять лень =)

[рони]

ufaclub,
смотри строку 15 например пропуск есть -- когда вставляешь клон этого пропуска нет теги идут слитно

[рони]

ufaclub,
вариант с float: lefthttp://jsfiddle.net/b5n00usm/1/

[ufaclub]

рони, спасибо!