jquery slideshow

[riaron86]

Темизирую сайт на друпал не могу подобрать алгоритм для слайд-шоу на jquery.
Так чтобы картинки(их по 4 в каждом артикле) по очереди показывались через 5 секунд так:
С начала первая занимает 75% <div>-а а остальные размером в высоту 25% и 25% в ширину справа потом вторая в 75%X75% остальные по 25% справа и т.д.
Вот код для каждого артикля

<div class="field__item">
    <div class="field__item">
        <img class="myphoto" src="/dfgh/ertyhjk1.jpg">
    </div>
    <div class="field__item">
        <img class="myphoto" src="/dfgh/ertyhjk2.jpg">
    </div>
    <div class="field__item">
        <img class="myphoto" src="/dfgh/ertyhjk3.jpg">
    </div>
    <div class="field__item">
        <img class="myphoto" src="/dfgh/ertyhjk4.jpg">
    </div>
</div>

С начала создал 5 стилей(создал 5 для разных экспериментов) один из них увеличивает картинку остальные одинаковые и делают картинку 25 на 25(). Потом добавил классы для каждой <img> и <div>-ов с первого по четвертый на каждого.
Далее для первого шага слайд-шоу(увеличить первую картинку) сделать все просто. А для второго шага столкнулся с проблемой перемещения каждых первых элементов после каждых вторых.

(function ($, Drupal) {
 
  'use strict';
//Стилизация изображения
    $("img.image-style-my-style-350x250-").parents("div.field__item").addClass('photo-parent');
    $(".photo-parent:nth-child(4n-3)").addClass('one');
    $("div.one img.image-style-my-style-350x250-").addClass("firsti");
    $(".photo-parent:nth-child(4n-2)").addClass('two');
    $("div.two img.image-style-my-style-350x250-").addClass("secondi");
    $(".photo-parent:nth-child(4n-1)").addClass('three');
    $("div.three img.image-style-my-style-350x250-").addClass("thirdi");
    $(".photo-parent:nth-child(4n)").addClass('four');
    $("div.four img.image-style-my-style-350x250-").addClass("fourthi");
 
 
//слайд-шоу
var i=1;
    setInterval(function(){
        if(i==1){
            $("div.one img").toggleClass("firsti bigg");
     
        }else if(i==2){
                $(".photo-parent:nth-child(4n-3)").insertAfter($(".photo-parent:nth-child(4n-3)").next());
            $("div.one img").toggleClass("firsti bigg");
            $("div.two img").toggleClass("secondi bigg");
        }
        i++;
        if(i>4){
            i=1;
        }
    },5000);
})(jQuery, Drupal);

как переместить каждые firsti изображения после каждых secondi?

[riaron86]

Проблема решенарешена