Прокрутите div бесконечность по кругу

Привет, я хотел бы прокрутить бесконечную div в цирке (горизонтальной). Когда я прокручиваю div справа, и он заканчивается, он не должен останавливаться, он должен начинаться с первого элемента и перемещаться. На данный момент я могу только прокручивать слева направо и назад. Он останавливается на последнем пункте. Это мой код:Прокрутите div бесконечность по кругу

$(".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>

Я хотел бы, чтобы прокрутить infinitiy при нажатии на стрелки влево и вправо.

Вот пример с обнаженным изображением для стрелка вправо:

Благодаря

источник

2016-05-31 MrBuggy

Вы имеете в виду это?

$(".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>

источник

2016-05-31 09:57:11 NiZa

Привет и спасибо за ответ. Это не решение, которое я искал. Идея заключается в том, что, когда я нажимаю стрелку вправо и нажимаю ее до тех пор, пока не дойду до конца, и не нажмем «вперед», она должна показать мне «Пункт 1» и так далее по кругу. То же самое для слева: когда я дойду до конца и нажимаю «вперед», он должен показать мне «Пункт 5» и так далее. Как в кругу ... – MrBuggy

Пожалуйста, посмотрите мой вопрос по набору вопросов – MrBuggy

Пожалуйста, проверьте обновленный ответ;) Надеюсь, это то, что вы хотите. – NiZa

Прокрутите div бесконечность по кругу

ответ

Смежные вопросы