Scrollen durch mehrere DIV-Elemente

Question

Zum Beispiel sagen wir, dass ich ein div-Element mit 100% Breite und 100px Höhe habe. Innerhalb dieses div habe ich 6 div Elemente schwebte nach links, mit overflow-x aktiviert. Was ich erreichen möchte, ist, dass der Benutzer durch die Schleife dieser divs scrollen kann (so dass das letzte div Element von der ersten - endlosen Schleife gefolgt wird).

Irgendeine Idee, wie man sich nähert?

Answer 1

können Sie jQuery verwenden insertAfter und insertBefore Funktionen

$('.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); 
}); 

Hier ist die DEMO

Answer 2

append/prepend ist das erste/letzte Element jeweils abhängig von der Richtung Sie gehen.

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>