nth-of-type不工作的javascript轮播

Question

我正在使用JS来创建一个显示3个图像的轮播，当按下一个/后一个图像被序列中的下一个图像替换时。前3个负载，因为jquery轰鸣声。当我按下（左边的箭头）时，下一个图像会加载，但另外两个图像会消失。最初，下一个按钮在按下后退按钮之前不会做任何事情。

我正在动态加载来自API的图像，所以我使用类型为nth的类来确定序列中每个图像的时间顺序。

  $('.multi-item-carousel').carousel({
    interval: false
  });

  $('.multi-item-carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':nth-of-type(1)');
    }
    next.children(':nth-of-type(1)').clone().appendTo($(this));

    if (next.next().length>0) {
      next.next().children(':nth-of-type(1)').clone().appendTo($(this));
    } else {
      $(this).siblings(':nth-of-type(1)').children(':nth-of-type(1)').clone().appendTo($(this));
    }
  });

  $( document ).ready(function() {
     $('.item:nth-of-type(1)').addClass('active');
     $('.item:nth-of-type(2)').addClass('active');
     $('.item:nth-of-type(3)').addClass('active');
  });