Slick：如何無限重復？
[英]Slick: how to repeat infinitely?
問題描述
我總共有 4 張圖像，它們都顯示在屏幕上。 我想要的是，一旦用戶點擊下一個按鈕，使第四張圖片顯示為第一張，而以前的第一張圖片現在是第二張，依此類推。
這是我的一段js代碼：
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
Infinite 設置為 true，但如果總共少於 5 張圖像，它就不會像我想要的那樣工作。
我在這里搜索了答案，並且能夠找到兩個類似的問題，但是他們都沒有正確的答案。 這些鏈接： 如何使光滑的輪播圖像無限重復以及如何使幻燈片無限（光滑的滑塊） 。
1 個解決方案
解決方案1
0 2017-03-29 15:10:41
這並不能解釋為什么該代碼不起作用，但這里有一個熱修復！
您可以復制您的一組圖像，因此您曾經擁有：
A B C D
你現在有：
ABCD ABCD
這將按照您希望的方式無限循環。
解決方案2
0 2017-03-29 16:11:53
雷切爾·尼古拉斯（Rachel Nicolas）..您可以嘗試一下，並從中學到一些東西。 我大概在2個月前研究過光滑的輪播。
$(document).ready(function() { $('.sliderman').slick({ infinite: true, dots: true, slidesToShow: 4, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000 }); });
body { background-color: gray; padding: 25px; } .box { border-style: solid; border-color: white; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Slick Carousel</title> <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"> </head> <body> <div class="sliderman" style="width: 600px;"> <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/camry-front.png" width="100px" height="100px"></div> <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/sienna-front.png" width="100px" height="100px"></div> <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/corolla-front.png" width="100px" height="100px"></div> <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/yarisia-front.png" width="100px" height="100px"></div> <div class="box"><img src="http://www.toyota.com/content/common/img/jellies/homepage/2017/corolla-front.png" width="100px" height="100px"></div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> </body> </html>
如何無限重復兩次javascript setInterval計時器
[英]How to repeat javascript setInterval timer infinitely with two times
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.