jQuery Карусель не повторяется

Question

Я пытаюсь создать карусель для своего сайта, и у меня возникают проблемы с перемещением слайдов в обратную сторону списка, поэтому это непрерывный поток без пробелов. Вот код:

<div class="maskleft"></div> 
<div class="maskright"></div> 

<div class="slideshow"> 
    <div class="views-row views-row-1 views-row-odd views-row-first"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-2 views-row-even"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-3 views-row-odd"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 

    <div class="views-row views-row-4 views-row-even views-row-last"> 
     <div class="panel-text">text</div> 
     <div class="views-field views-field-field-image-feature"> 
      <img typeof="foaf:Image" src="" alt="" /> 
     </div> 
     <img typeof="foaf:Image" src="" alt="" /> 
    </div> 
</div> 

JQuery является:

function slideChange() { 
    var $slider = $('.slideshow'); 

    var $next = $slider.next().length ? $slider.next() : $('.slideshow'); 

    $next.animate({marginLeft: '-=1024'}, 1000, function() { 
    }); 
} 

$(document).ready(function() { 
    setInterval("slideChange()", 5000); 
}); 

Сайт живой DEV здесь: http://dev.shoeboxdesign.co.uk/

Answer 1

1. Вы только один div ведьма движется, почему вы нужен этот код:

   var $next = $slider.next().length ? $slider.next() : $('.slideshow'); 
   

2. Вам нужно сбросить marginLeft стиль, когда вы дойдете до конца слайд-шоу:

   if (... check the end of slideshow ...) { // could be calculation of the widht, count of slides, etc. 
       $slider.css({marginLeft: '0'}); 
   } 
   

Answer 2

Если я вас правильно, вы хотите добавить первый слайд до конца слайд-шоу, так что вы есть постоянный поток вместо прыжка, сбрасываемого до начала. Предполагая, что это правильно, мы нашли важное ключевое слово: append.

Вы должны сделать первый слайд и добавить его к последнему слайду. Сделайте это с помощью каждого шага анимации. Мы закончили с чем-то вроде этого.

function slideChange() { 
    var $slider = $('.slideshow'); 
    var $first = $slider.first(); 

    $slider.append($first); // Append a copy of the first slide to the last one 
    $slider.animate({marginLeft: '-=1024'}, 1000, function() { 
     $first.remove(); // Remove the first slide we just copied. So we virtually swapped the slide from the first to the last place 
     $slider.css({marginLeft: '+=1024'}); // Reset the margin 
    }); 

} 

Это решение не проверено, но должно сделать трюк. Но я все еще вижу некоторые проблемы в вашем коде.

Вы хотите использовать эту функцию только для этого слайдер? Если ваш ответ «да», вы должны определенно дать вашему слайдеру #id, а не селектор .class. И поскольку вы больше не будете использовать свою функцию, нет необходимости в общедоступной функции. Вы можете сделать это анонимно, что экономит некоторые ресурсы.

setInterval(function() { 
    /* Your stuff goes here */ 
}, 5000);