Picture carousel scrolling effect written with Jquery animate

<style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .clearfix:after,
  .clearfix:before {
    content: "";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }
  .swiper_box {
    width: 750px;
    height: 530px;
    margin: 10px auto;
    overflow: hidden;
  }
  .swiper_box .swiper_list {
    list-style: none;
    width: 9999px;
  }
  .swiper_box .swiper_list .swiper_list_item {
    float: left;
    background-color: #fff;
    padding: 15px;
    width: 250px;
  }
  .swiper_box .swiper_list .swiper_list_item .con {
    width: 100%;
    text-align: center;
  }
  .swiper_box .swiper_list .swiper_list_item .con .img_box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    /**border: 2px solid #226592;**/
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .swiper_box .swiper_list .swiper_list_item .con .img_box img {
    width: 100%;
  }
  .swiper_box .swiper_list .swiper_list_item .con p {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #005c99;
  }
  .swiper_box .swiper_list .swiper_list_item .con:first-child {
    margin-bottom: 20px;
  }
  
  </style>
  

  <div class="swiper_box">
    <ul class="swiper_list clearfix">
      <li class="swiper_list_item">
        <div class="con">
          <div class="img_box">
            <img src="/images/img/1.jpg" />
          </div>
          <p>1111</p>
        </div>
        <div class="con">
          <div class="img_box">
            <img src="/images/img/2.jpg" />
          </div>
          <p>22222</p>
        </div>
      </li>
      <li class="swiper_list_item">
        <div class="con">
          <div class="img_box">
            <img src="/images/img/3.jpg" />
          </div>
          <p>3333</p>
        </div>
        <div class="con">
          <div class="img_box">
            <img src="/images/img/4.jpg" />
          </div>
          <p>44444</p>
        </div>
      </li>
      <li class="swiper_list_item">
        <div class="con">
          <div class="img_box">
            <img src="/images/img/5.jpg" />
          </div>
          <p>555555</p>
        </div>
        <div class="con">
          <div class="img_box">
            <img src="/images/img/6.jpg" />
          </div>
          <p>66666</p>
        </div>
      </li>
      <li class="swiper_list_item">
        <div class="con">
          <div class="img_box">
            <img src="/images/img/7.jpg" />
          </div>
          <p>7777</p>
        </div>
        <div class="con">
          <div class="img_box">
            <img src="/images/img/8.jpg" />
          </div>
          <p>8888</p>
        </div>
      </li>
      <li class="swiper_list_item">
        <div class="con">
          <div class="img_box">
            <img src="/images/img/9.jpg" />
          </div>
          <p>9999</p>
        </div>
        <div class="con">
          <div class="img_box">
            <img src="/images/img/10.jpg" />
          </div>
          <p>1010</p>
        </div>
      </li>
      <li class="swiper_list_item">
        <div class="con">
          <div class="img_box">
            <img src="/images/img/11.jpg" />
          </div>
          <p>111111</p>
        </div>
        <div class="con">
          <div class="img_box">
            <img src="/images/img/12.jpg" />
          </div>
          <p>12121212</p>
        </div>
      </li>
      <li class="swiper_list_item">
        <div class="con">
          <div class="img_box">
            <img src="/images/img/13.jpg" />
          </div>
          <p>131313</p>
        </div>
        <div class="con">
          <div class="img_box">
            <img src="/images/img/14.jpg" />
          </div>
          <p>141414</p>
        </div>
      </li>
      <li class="swiper_list_item">
        <div class="con">
          <div class="img_box">
            <img src="/images/img/15.jpg" />
          </div>
          <p>1515</p>
        </div>
        <div class="con">
          <div class="img_box">
            <img src="/images/img/16.jpg" />
          </div>
          <p>161616</p>
        </div>
      </li>
    </ul>
  </div>

  <script>

    $(document).ready(function () {
   
    var left = $(".swiper_list_item").outerWidth()
        
      function scroll() {
        $(".swiper_list").animate({ "margin-left": "-"+left+"px" }, function () {
          $(".swiper_list li:eq(0)").appendTo($(".swiper_list"));
          $(".swiper_list").css({ "margin-left": 0 });
        });
      }

      var scrolling = setInterval(scroll, 3000);
      $('.swiper_list_item').hover(function () {
        clearInterval(scrolling);
      }, function () {
        scrolling = setInterval(scroll, 3000);
      });

    })

  </script>