同时加载多个幻灯片，但每个自己的控件

Question

我在一个页面中有多个幻灯片，但是工作正常的是第一个幻灯片，而第二个和其余的幻灯片必须等待第一个幻灯片完成滑动所有图像。

以下是fiddle

<ul class="images">
  <li><img src="https://www.ricoh.com/r_dc/cx/cx1/img/sample_04.jpg"></li>
  <li><img src="http://asia.olympus-imaging.com/content/000011491.jpg"></li>
  <li><img src="http://plewiska.pl/wp-content/uploads/sample_02.jpg"></li>
  <p class="control prev">❰</p>
  <p class="control next">❱ </p>
  <div class="triggers">
    <p></p>
    <p></p>
    <p></p>
  </div>
  <p id="buttonImage">Edit</p>
</ul>


<ul class="images">
  <li><img src="https://www.ricoh.com/r_dc/cx/cx1/img/sample_04.jpg"></li>
  <li><img src="http://asia.olympus-imaging.com/content/000011491.jpg"></li>
  <li><img src="http://plewiska.pl/wp-content/uploads/sample_02.jpg"></li>
  <p class="control prev">❰</p>
  <p class="control next">❱ </p>
  <div class="triggers">
    <p></p>
    <p></p>
    <p></p>
  </div>
  <p id="buttonImage">Edit</p>
</ul>


  $(document).ready(function(){     

      var triggers = $('div.triggers p');

      var images = $('ul.images li');
      var lastElem = triggers.length-1;
      var target;

      triggers.first().addClass('active');
      images.hide().first().show();

      triggers.click(function() {
          if ( !$(this).hasClass('active') ) {
              target = $(this).index();
              sliderResponse(target);
              resetTiming();
          }
      }); 

      $('.next').click(function() {
          target = $('div.triggers p.active').index();
          target === lastElem ? target = 0 : target = target+1;
          sliderResponse(target);
          resetTiming();
      });

      $('.prev').click(function() {
          target = $('div.triggers p.active').index();
          lastElem = triggers.length-1;
          target === 0 ? target = lastElem : target = target-1;
          sliderResponse(target);
          resetTiming();
      });


      function sliderResponse(target) {
          images.fadeOut(1000).eq(target).fadeIn(1000);
          triggers.removeClass('active').eq(target).addClass('active');
      }

      function sliderTiming() {
          target = $('div.triggers p.active').index();

          firstElem = triggers.first;

          target === lastElem ? target = 0 : target = target+1;
          sliderResponse(target);
      }

      var timingRun = setInterval(function() { sliderTiming(); },6000);

      function resetTiming() {
          clearInterval(timingRun);
          timingRun = setInterval(function() { sliderTiming(); },6000);
      }      
    });