Jquery 水平滑动的响应柱

我正在使用引导创建响应列。我想要的是，当用户单击左箭头或右箭头时，下一列内容将从左箭头或右箭头滑入，具体取决于用户单击的是左箭头还是右箭头

我了解了如何使用固定宽度的列执行此操作：

但是如何使用响应宽度列呢

<div class="row">
<div class="col-md-1 arrow"><i class="fa fa-chevron-left"></i></div>
<div class="col-md-3">
<div class="country"><a href="">Afghanistan</a></div>
<div class="country"><a href="">Albania</a></div>
<div class="country"><a href="">Algeria</a></div>
<div class="country"><a href="">Andorra</a></div>
<div class="country"><a href="">Angola</a></div>
<div class="country"><a href="">Antigua</a></div>
</div>
  <div class="col-md-3">
<div class="country"><a href="">Argentina</a></div>
<div class="country"><a href="">Armenia</a></div>
<div class="country"><a href="">Australia</a></div>
<div class="country"><a href="">Austria</a></div>
<div class="country"><a href="">Azerbaijan</a></div>

</div>
  <div class="col-md-3">
<div class="country"><a href="">Bahamas</a></div>
<div class="country"><a href="">Bahrain</a></div>
<div class="country"><a href="">Bangladesh</a></div>
<div class="country"><a href="">Barbados</a></div>
<div class="country"><a href="">Belarus</a></div>
<div class="country"><a href="">Belgium</a></div>
</div>

 (would like to have other columns of countries here)

<div class="col-md-1 arrow"><i class="fa fa-chevron-right"></i></div>

</div>

（希望此处有其他国家/地区栏）

在您提供的演示中，它通过固定的

152

$('.table-container').animate({scrollLeft:'+=152'}, 'slow');

因此，您的任务是在DOM就绪和调整窗口大小以跟踪

col-md-3

宽度：

$(function(){ // DOM IS NOW READY

    var $colMD3 = $('.col-md-3'); // Cache your selector!
    var colW;

    function getColW(){
       colW = $colMD3.outerWidth(true);
    }
    getColW(); // on DOM ready - get the width
    $(window).resize( getColW ); // but also on resize

    // OTHER CODE HERE

});

你的点击应该是这样的：

 // OTHER CODE HERE
 $('#previous-column, #next-column').click(function(event) {
    event.preventDefault();
    var np = this.id.match("next") ? "+=" : "-=" ;
    $('.table-container').stop().animate({scrollLeft: np+colW}, 800);        
 });

---

我附加的代码只有在没有引导代码的情况下才有效。我需要一些可以处理引导行的东西。@LauraNMS引导行几乎是魔术。请设置一个jsbin.com演示，我会尽我最大的努力来看看我们如何做到这一点@抱歉，我在溢出父级中没有看到任何列。目前无能为力