具有异步功能的滑块？

Question

您好，这是我的代码和jsfiddle

<div id="section-2" class="section">
    <div class="fullContentWrap">
      <!-- client_logos_row -->
      <div class="flexRow toLeft" style="left: 0%;">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
      </div>
      <div class="flexRow toLeft" style="left: 0%;">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <!-- flexRow toLeft -->
    </div>
    <!-- fullContentWrap -->
  </div>

$(document).ready(function() {
        console.log("interval doc ready");
        var  currToLeft = $('.toLeft').first();
        currToLeft.addClass("toLeftActive");
       var myInt = setInterval(intFunc,3000);
       console.log('myInt set');
       function intFunc() {
         console.log('intFunc !');
         currToLeft.animate({left: '-101%'}, "slow",function () {
           $(this).removeClass("toLeftActive");
           $(this).css("left",'0%');
           currToLeft = $(this).next();
           if (currToLeft.length === 0) {
             currToLeft = $('.toLeft').first();
           }
           currToLeft.addClass('toLeftActive');
         });
       }
       // intFunc
    });
   //  document ready




 .box {
    width: 100px;
    height: 100px;
  }
  .flexRow {
    display: flex;
  }
  .toLeft{
    display: none;
    left: 100%;
  }
  .toLeftActive {
    display: flex !important;
  }
  .flexRow:nth-child(1) .box:nth-child(1) {
    background: blue;
  }
  .flexRow:nth-child(1) .box:nth-child(2) {
    background: red;
  }
  .flexRow:nth-child(1) .box:nth-child(3) {
    background: orange;
  }
  .flexRow:nth-child(2) .box:nth-child(1) {
    background: aqua;
  }
  .flexRow:nth-child(2) .box:nth-child(2) {
    background: green;
  }
  .flexRow:nth-child(2) .box:nth-child(3) {
    background: brown;
  }
  div#section-2 {
      position: relative;
  }

  div#section-2>.fullContentWrap {
      position: inherit;
  }

  div#section-2>.fullContentWrap>.flexRow {
      position: inherit;
      justify-content: center;
  }

  div#section-2>.fullContentWrap>.flexRow>div {
      position: inherit;
  }

https://jsfiddle.net/2918ztze/ 你可以猜到我正在做一个滑块。第一个块应该从屏幕向左移动而另一个应该从右到左：0 同时 。 我不确定这个同时部分应该如何完成，可能有一些异步编码，但我该怎么办呢？