Создать карусель, показать количество элементов, спрятать и показать следующее количество элементов

Question

Я пытаюсь создать карусель, где она сначала показывает первые 7 изображений, а во внутреннем пространстве она должна показать первые 7 изображений, затем исчезнуть и показать следующие 7 изображений.

И когда все изображения показаны, он должен начаться снова и иметь бесконечный цикл.

Как я могу это исправить?

HTML:

<div class='flow'>
   <img src='assets/library/en/references/1.png' />
   <img src='assets/library/en/references/2.png' />
   <img src='assets/library/en/references/3.png' />
   <img src='assets/library/en/references/4.png' />
   <img src='assets/library/en/references/5.png' />
   <img src='assets/library/en/references/6.png' />
   <img src='assets/library/en/references/7.png' />
   <img src='assets/library/en/references/8.png' />
   <img src='assets/library/en/references/9.png' />
   <img src='assets/library/en/references/10.png' />
   <img src='assets/library/en/references/11.png' />
   <img src='assets/library/en/references/12.png' />
   <img src='assets/library/en/references/13.png' />
   <img src='assets/library/en/references/14.png' />
   <img src='assets/library/en/references/15.png' />
   <img src='assets/library/en/references/16.png' />
   <img src='assets/library/en/references/17.png' />
   <img src='assets/library/en/references/18.png' />
   <img src='assets/library/en/references/19.png' />
   <img src='assets/library/en/references/20.png' />
   <img src='assets/library/en/references/21.png' />
</div>

Jquery:

x = 21;

setInterval(function() {

if(x>=21){

    x = 21;    
}

x = x - 7;
y = x + 7;

    setTimeout(function() {
        $('.flow > img:nth-child(1n+'+y+')').fadeOut().animate({
            opacity: 0
        }, 500);
    }, 3000);

    setTimeout(function() { 
        $('.flow > img:nth-child(1n+'+x+')').fadeIn().animate({
            opacity: 1
        }, 500);
    }, 3000);

}, 3000);

Answer 1

Я думаю, что есть много подходов к этому, и есть много плагинов jQuery для карусели изображений (unheap.com - хороший репозиторий плагинов jquery, вы можете изучить здесь). Я все еще новичок в jQuery и у меня та же проблема некоторое время назад.

Я чувствую себя комфортно, делая это с функцией.each(), а не манипулируя селектором nth-child.

var len = $('.flow > img').length;
var by = 7;
var start = -1; //since first index is 0, I'll start lower than that
var curr = start;

setInterval(function(){
    if(curr >= len - 1){
        curr = start;
    }

    $('.flow > img').each(function(index, element) {
        if(index > curr && index <= curr + by){
            $(this).fadeIn(500);
        }else{
            $(this).hide();
        }
    });

    curr += by;

}, 3000);

пожалуйста, посмотрите мою скрипку:

JsFiddle