複数のDIV要素をスクロールする

Question

たとえば、100%の幅と100pxの高さのdiv要素があるとします。そのdivの中には、div3要素が左に浮かんでいて、overflow-xが有効になっています。私が達成したいのは、ユーザーがこれらのdivのループをスクロールすることができることです（最後のdiv要素の後に最初の無限ループが続きます）。

どのようにアプローチするか？

Answer 1

あなたはここでjQueryのinsertAfterとinsertBefore機能

$('.next').click(function(){ 
    var last = $('#parent').find('div').last(); 
    $('#parent').find('div').first().insertAfter(last); 
}); 

$('.prev').click(function(){ 
    var first= $('#parent').find('div').first(); 
    $('#parent').find('div').last().insertBefore(first); 
}); 

を使用することができますDEMO

Answer 2

append/prependは、あなたが行っている方向に応じて、それぞれの最後の/最初の要素です。

jQuery(window).keyup(function(e){ 
 
    switch(e.keyCode){ 
 
    case 37: 
 
     left(); 
 
     break; 
 
    case 39: 
 
     right(); 
 
     break; 
 
    } 
 
}) 
 
var container=jQuery("#container"); 
 

 
function left(){ 
 
    container.find(".item:last").prependTo(container); 
 
} 
 

 
function right(){ 
 
    container.find(".item:first").appendTo(container); 
 
}

html,body { 
 
    width:100vw; 
 
    height:100vh; 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 
#container { 
 
    width:100vw; 
 
    height:100px; 
 
    display:flex; 
 
    position:relative; 
 
} 
 

 
.item { 
 
    width:100px; 
 
    height: 94px; 
 
    margin:3px; 
 
    flex:0 1 100px; 
 
} 
 

 
.red {background:#F00;} 
 
.green {background:#0F0;} 
 
.blue {background:#00F;} 
 
.yellow {background:#FF0;} 
 
.turq {background:#0FF;} 
 
.purple {background:#F0F;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="item red"></div> 
 
    <div class="item green"></div> 
 
    <div class="item blue"></div> 
 
    <div class="item yellow"></div> 
 
    <div class="item turq"></div> 
 
    <div class="item purple"></div> 
 
</div>