jQuery动画将项目从NodeList的开头移动到结束，反之亦然

Question

我正在尝试使用jQuery动画元素的移动。请参阅以下代码，了解我迄今为止所构建的内容。

我要做的是在向左和向右移动时为article制作动画，但这似乎没有任何效果。这是我这样做的方式吗？我应该查看除jQuery之外的其他库吗？

$(document).ready(function() {

    $(document).on('swipeleft swiperight', function(event) {
        event.stopImmediatePropagation();
    });

    var productArray = [].slice.call(document.querySelectorAll('article.product'));
    var slideWidth = $('article.product').width();

    function nextItem() {
        $('.slider').animate({
            marginLeft: "-" + slideWidth
        }, 1000, function() {
            $('.slider').find('article.product:last').after($('.slider').find('article.product:first'));
        });
    }

    function previousItem() {
        $('.slider').animate({}, 1000, function() {
            $('.slider').find('article.product:first').before($('.slider').find('article.product:last'));
        });
    }


    $('.next').on('click', function() {
        nextItem();
    });

    $('.back').on('click', function() {
        previousItem();
    });

    $('html, body')
        .on('swipeleft', function(e) {
            e.stopPropagation();
            nextItem();
        }).on('swiperight', function(e) {
            e.stopPropagation();
            previousItem();
    });


});

main.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #e3e3e3;
  overflow: hidden;
  position: relative; }
  main.container::after {
    clear: both;
    content: "";
    display: table; }
  main.container div.slider {
    width: 600%;
    margin-left: -100%; }
    main.container div.slider article.product {
      width: 16.66%;
      float: left;
      margin-left: 0px;
      height: 200px;
      text-align: center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<main class="container">
  <div class="slider">
    <article class="product">1</article>
    <article class="product">2</article>
    <article class="product">3</article>
    <article class="product">4</article>
    <article class="product">5</article>
    <article class="product">6</article>
  </div>
  <div class="controls">
    <a href="#" class="back">Back</a>
    <a href="#" class="next">Next</a>
  </div>
</main>