水平滑動的響應列

Question

我使用Bootstrap創建響應列。我想要的是當用戶點擊左側或右側箭頭時，讓下一列內容從左側或右側滑入，具體取決於用戶是單擊左側還是右側。

我看到如何使用固定寬度的列做到這一點：http://jsfiddle.net/nheldman/GB7Hc/3/

但我怎麼與響應寬度列做呢？

<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> 

Answer 1

在演示中，你只要動畫由固定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);   
});