jQuery слайд-шоу изображения задержки

Question

У меня есть слайд-шоу, которое поворачивает три изображения справа налево. Все работает нормально, за исключением того, что изображения скользят после того, как предыдущее изображение уже скользнуло полностью (оставив пробел между изображениями). Я пробовал разные тайминги с функциями setInterval и hide и show, но безрезультатно.

JavaScript:

$(document).ready(function(){ 
    $(".slider .1").show("fade", 500); 
    $(".slider .1").delay(5500).hide("slide", {direction:"left"}, 500); 

    var sc = $(".slider img").size(); 
    var count = 2; 

    setInterval(function() { 
     $(".slider ."+count).show("slide", {direction:"right"}, 500); 
     $(".slider ."+count).delay(5500).hide("slide", {direction:'left'}, 500); 

     if(count == sc) { 
      count = 1; 
     } else { 
      count = count + 1; 
     } 
    }, 6500); 

}); 

CSS:

.slider { 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
    margin: 30px auto; 
    background-image: url('http://www.thatssotrue.com/images/ajax_loader.gif'); 
    background-size: 50px 50px; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

.slider img { 
    width: 200px; 
    height: 200px; 
    display: none; 
} 

HTML:

<div class="slider"> 
     <img class="1" src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg" height="200" width="200"> 
     <img class="2" src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg" height="200" width="200"> 
     <img class="3" src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg" height="200" width="200"> 
    </div> 

JSFIDDLE: http://jsfiddle.net/6FF4y/2/

Любые идеи о том, как я мог бы сделать изображения обнимать друг друга (без пробелов между ними), когда они вставляются/выходят?

Note: У меня нет ни одного изображения, и я не связываюсь с сайтами, на которых они размещаются. Я просто использовал их в качестве примера, поскольку изображения, которые я фактически использую, - это просто каталог, а не URL-адрес.

Любая помощь была бы высоко оценена!

Answer 1

Это просто случай разметки. Во-первых, неправильные имена ваших классов 1, 2 и 3. Класс не может начинаться с числа.

Во-вторых, оберните свои изображения в <div> - обертки всегда хороши! Затем изображениедолжно быть завернуто во внутреннюю обертку. Вы захотите свернуть внутреннюю обертку. Лучше всего, вероятно, использовать анимацию jQuery и зацикливать ее.

Как эта скрипка? http://jsfiddle.net/6FF4y/4/