php - 使 div 可水平滚动

Question

我正在尝试使 div 水平滚动
这是一个 html 示例：

     <div class="container">
      <div class="wrapper">
        <div class="grid grid-wr">
          <h1>Products We Offer</h1><hr>
          <div class="product-slide">
            <button id="arrows" class="next">&#8250;</button>
              <img class="product" src="" alt="">
              <img class="product" src="" alt="">
              <img class="product" src="" alt="">
              <img class="product" src="" alt="">
              <img class="product" src="" alt="">
              <img class="product" src="" alt="">
            <button id="arrows" class="prev">&#8249;</button>
          </div>
        </div>
      </div>
    </div>

我在这里找到了答案

            var currentIdx = 0;
            jQuery.easing.def = "easeInOutQuad";
                $(".next").click(function (){

                    //$(this).animate(function(){
                        $('.product-slide').animate({
                            scrollLeft: $(".product").eq(currentIdx).offset().left
                             }, 600);
                        currentIdx++;
                    //});
                });

但是对我来说不能正常工作
我想一个一个滚动项目，或者显示下一个 5 或其他什么？
当我放置固定距离 ex:+=400px 时，增量不起作用
，它工作正常，我真的被卡住了

标签： phpjqueryhtmlcssresponsive-design