Scrolle eine div Unendlichkeit in einem Kreis

Hi Ich möchte eine div Unendlichkeit in einem Kreis (horizontal) scrollen. Wenn ich das div nach rechts scrolle und es bis zum Ende kommt, sollte es nicht aufhören, es sollte mit dem ersten Element beginnen und herumgehen. Im Moment kann ich nur von links nach rechts und zurück scrollen. Es bleibt beim letzten Gegenstand stehen. Dies ist mein Code:Scrolle eine div Unendlichkeit in einem Kreis

$(".arrowLeft").click(function(){ 
 
    \t var e = $('.myList'); 
 
    var scrollLength = 20; 
 
\t e.scrollLeft(e.scrollLeft() - scrollLength); 
 
}); 
 

 
$(".arrowRight").click(function(){ 
 
    \t var e = $('.myList'); 
 
    var scrollLength = 20; 
 
\t e.scrollLeft(e.scrollLeft() + scrollLength); 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.myList { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: grey; 
 
    display: flex; 
 
    flex-direction: row; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    padding: 10px; 
 
} 
 

 
.arrows { 
 
    height: 100%; 
 
    width: 30px; 
 
    background-color: rgb(240, 240, 240); 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.listItems { 
 
    height: 100%; 
 
    width: 150px; 
 
    color: white; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    
 
    <body> 
 
    <div class="wrapper"> 
 
     <div class="arrows arrowLeft">&larr;</div> 
 
    
 
     <div class="myList"> 
 
     <div class="listItem">Item 1</div> 
 
     <div class="listItem">Item 2</div> 
 
     <div class="listItem">Item 3</div> 
 
     <div class="listItem">Item 4</div> 
 
     <div class="listItem">Item 5</div> 
 
     </div> 
 
    
 
     <div class="arrows arrowRight">&rarr;</div> 
 
    </div> 
 
    </body> 
 
</html>

Ich möchte infinitiy scrollen, wenn ich auf die Pfeile links und rechts klicken.

Hier ein Beispiel mit einem gezogenen Bild für den Pfeil nach rechts:

Dank

Quelle

2016-05-31 MrBuggy

du das?

$(".arrowLeft").click(function() { 
 
    var e = $('.myList'); 
 
    var scrollLength = 20; 
 
    e.scrollLeft(e.scrollLeft() - scrollLength); 
 
    if (e.scrollLeft() == 0) { 
 
    $('.listItem').last().insertBefore($('.listItem').first()); 
 
    e.scrollLeft(e.scrollLeft() - scrollLength); 
 
    } 
 
}); 
 

 

 
$(".arrowRight").click(function() { 
 
    var e = $('.myList'); 
 
    var scrollLength = 20; 
 
    e.scrollLeft(e.scrollLeft() + scrollLength); 
 
    if (e.scrollLeft() + e.outerWidth() == e[0].scrollWidth) { 
 
    $('.listItem').first().insertAfter($('.listItem').last()); 
 
    e.scrollLeft(e.scrollLeft() + scrollLength); 
 
    } 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.myList { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: grey; 
 
    display: flex; 
 
    flex-direction: row; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    padding: 10px; 
 
} 
 

 
.arrows { 
 
    height: 100%; 
 
    width: 30px; 
 
    background-color: rgb(240, 240, 240); 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.listItems { 
 
    height: 100%; 
 
    width: 150px; 
 
    color: white; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    
 
    <body> 
 
    <div class="wrapper"> 
 
     <div class="arrows arrowLeft">&larr;</div> 
 
    
 
     <div class="myList"> 
 
     <div class="listItem">Item 1</div> 
 
     <div class="listItem">Item 2</div> 
 
     <div class="listItem">Item 3</div> 
 
     <div class="listItem">Item 4</div> 
 
     <div class="listItem">Item 5</div> 
 
     </div> 
 
    
 
     <div class="arrows arrowRight">&rarr;</div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2016-05-31 09:57:11 NiZa

Hallo und vielen Dank für die Antwort. Dies ist nicht die Lösung, nach der ich gesucht habe. Die Idee ist, wenn ich auf den rechten Pfeil klicke und darauf klicke, bis ich an das Ende komme und dann auf Fortschritt klicke, sollte es mir den "Gegenstand 1" usw. im Kreis zeigen. Das selbe für links: Wenn ich zum Ende komme und auf Fortschritt klicke, sollte es "Item 5" anzeigen und so weiter. Wie in einem Kreis ... – MrBuggy

Bitte schauen Sie sich meine Bearbeitungsfrage an – MrBuggy

Bitte überprüfen Sie die aktualisierte Antwort;) Hoffentlich ist das, was Sie wollen. – NiZa

Scrolle eine div Unendlichkeit in einem Kreis

Antwort

Verwandte Themen