油滑：如何無限重複？

我總共有4張圖片，都顯示在屏幕上。我想要的是，一旦用戶點擊下一個按鈕，使第4張圖像顯示爲第1張，而先前的第1張圖像現在是第2張，依此類推。油滑：如何無限重複？

這是一張我的js代碼：

infinite: true, 
    slidesToShow: 4, 
    slidesToScroll: 1,

無限設置爲true，但它不工作，我想它，如果總共有不到5幅圖像的方式。

我已經在這裏尋找答案，並能找到兩個類似的問題，但是他們都沒有正確的答案。這些鏈接： How to make slick carousel images repeat infinitely和how could i make slides infinite (slick slider)。

來源

2017-03-29 Rachel Nicolas

它是如何工作的？似乎沒關係，你的代碼段... – hering

@hering它工作無限，如果我有5個或更多的圖像，但我只需要有4 –

@RachelNicolas你的代碼似乎是正確的，是否有可能發佈信息其餘的代碼或共享一個jsfiddle？這會讓任何人都更容易給出答案。 – azs06

這並不能解釋爲什麼該代碼無法正常工作，但這裏是一個熱點解決方案！

您可以複製您的圖片集，所以在這裏你曾經擁有過：

ABCD

你現在有：

ABCDABCD

這將現在無限循環你想要的方式。

來源

2017-03-29 15:10:41

嗯，它完全解決了這個問題，但不幸的是，它不能解決我的情況 –

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>

來源

2017-03-29 16:11:53

我已經有這個運行。你有5個元素，你一次顯示4個元素。這不是我正在尋找的。 –

油滑：如何無限重複？

回答

相關問題