ブートストラップのテーブルにカルーセルエフェクトを適用するにはどうすればよいですか？

Question

テーブルレスポンスクラスを追加することによってテーブルをスクロール可能にすることはできますが、ループを終了すると、最初のカラムが最後のカラムのあとにあるようにループできます。 （これは、マーキーを適用したときには発生しません）

Answer 1

これはあなたが探していたものですが、涼しい考えのように聞こえました。私が "テーブル上のカルーセル効果"（これはあなたが尋ねていたと思うもの）を思いついたものです。コードスニペットを実行して、効果を確認します。シームレスなスクロール効果を得るには、CSSを少し変更する必要があります。

var $table = $('.table-wrapper table'); 
 

 
var leftTimeout, left = $('.left'); 
 

 
function scrollLeft(){ 
 
\t $('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()-50); 
 
\t $.each($table.find('tr'),function(){ 
 
\t \t $(this).children().last().detach().prependTo(this); 
 
\t }); 
 
} 
 

 
left.mousedown(function(){ 
 
\t scrollLeft(); 
 
    leftTimeout = setInterval(function(){ 
 
    \t scrollLeft(); 
 
    }, 500); 
 

 
    return false; 
 
}); 
 
$(document).mouseup(function(){ 
 
    clearInterval(leftTimeout); 
 
    return false; 
 
}); 
 

 
var rightTimeout, right = $('.right'); 
 

 
function scrollRight(){ 
 
\t $('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()+50); 
 
\t $.each($table.find('tr'),function(){ 
 
\t \t $(this).children().first().detach().appendTo(this); 
 
\t }); 
 
} 
 

 
right.mousedown(function(){ 
 
\t scrollRight(); 
 
    leftTimeout = setInterval(function(){ 
 
    \t scrollRight(); 
 
    }, 500); 
 

 
    return false; 
 
}); 
 
$(document).mouseup(function(){ 
 
    clearInterval(rightTimeout); 
 
    return false; 
 
});

.table-wrapper 
 
{  \t 
 
    border: 1px solid red; 
 
    width: 200px; 
 
    height: 150px;   
 
    overflow:hidden; 
 
} 
 

 
table 
 
{ 
 
    border: 1px solid black; 
 
    margin-right: 20px; 
 
} 
 

 
td 
 
{ 
 
    min-width: 50px; 
 
    height: 20px; 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="table-wrapper"> 
 
    <table> 
 
     <tr> 
 
     \t <th>1h</th> 
 
      <th>2h</th> 
 
      <th>3h</th> 
 
      <th>4h</th> 
 
      <th>5h</th> 
 
      <th>6h</th> 
 
      <th>7h</th> 
 
      <th>8h</th> 
 
      <th>9h</th> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
      <td>6</td> 
 
      <td>7</td> 
 
      <td>8</td> 
 
      <td>9</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
      <td>6</td> 
 
      <td>7</td> 
 
      <td>8</td> 
 
      <td>9</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
      <td>6</td> 
 
      <td>7</td> 
 
      <td>8</td> 
 
      <td>9</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
      <td>6</td> 
 
      <td>7</td> 
 
      <td>8</td> 
 
      <td>9</td> 
 
     </tr> 
 
    </table>  
 
</div> 
 

 
<button class='left'><</button> 
 
<button class='right'>></button>