Question

我总共有4张图片，都显示在屏幕上。我想要的是，一旦用户点击下一个按钮使第四张图像显示为第一张，而之前的第一张图片将是第二张，依此类推。

这是我的一段代码：

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

无限设置为true，但如果总共少于5张图像，则无法按照我想要的方式工作。

我在这里搜索了答案，并且能够找到两个相似的问题，但是他们都没有正确答案。这些链接： How to make slick carousel images repeat infinitely和how could i make slides infinite (slick slider) 。

Answer 1

这并不能解释为什么该代码不起作用，但这是一个热门修复！

你可以复制你的图像集，所以你曾经拥有过的地方：

A B C D

你现在有：

A B C D A B C D

现在，这将以你想要的方式无限循环。

Answer 2

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>

光滑：如何无限重复？

2 个答案: