円内でdiv無限大をスクロール

こんにちは私はcirlce（水平）で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

こんにちは、答えてくれてありがとう。これは私が検索した解決策ではありません。アイデアは、私が右矢印をクリックしてそれをクリックすると、最後に到達し、前進をクリックするまで、それは私に "Item 1"などを円で表示するはずです。左の場合も同様です。最後までクリックして進むと、「アイテム5」などが表示されます。円のように... – MrBuggy

私のeditet質問を見てください – MrBuggy

更新された答えを確認してください;）うまくいけば、これはあなたが欲しいものです。 – NiZa

円内でdiv無限大をスクロール

答えて

関連する問題