CSS

Question

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <style>
    .d1 {
      background-color: lightblue;
      display: flex;
    }
    a {
      background-color: yellow;
      display: block;
      margin: 0 10px;
      width: 200px;
      height: 200px;
    }
  </style>
  <body>

  <div class="d1">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">2</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">3</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">4</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">5</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">6</a></div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
    });
  </script>

  </body>
</html>

我正在尝试连续显示 6 个 <a>，一次显示 3 个。我使用直接从他们的教程站点 (https://kenwheeler.github.io/slick/) 复制和粘贴的上述代码，我替换了容器 (class d1) 以及子元素，但结果根本不起作用或移动，甚至左右按钮都没有出现...该文件夹仅包含此 .html 文件。

Answer 1

为了解决这个问题我做了两件事：

添加光滑的初始化class "multiple-items"；这告诉 Slick 影响哪个容器
Link 在 cdn 上滑动 css、主题 css 和 javascript repos；确保您正确链接到项目中的那些（不是我说的 cdn 版本）

您的代码已更新，现在有效：

.d1 .slick-prev,
.d1 .slick-next {
width: 50px;
height: 50px;
z-index: 9999;
opacity: 1;
}

.d1 .slick-prev {
left: 25px;
}

.d1 .slick-next {
right: 25px;
}

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
  </head>
  <style>
    .d1 {
      background-color: lightblue;
      display: flex;
    }
    a {
      background-color: yellow;
      display: block;
      margin: 0 10px;
      width: 200px;
      height: 200px;
    }
  </style>
  <body>

  <div class="multiple-items d1">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">2</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">3</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">4</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">5</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">6</a></div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3, 
        arrows: true
      });
    });
  </script>

  </body>
</html>

Answer 2

您正在为 slick 初始化 class "d1"。但是在脚本上，您的目标是错误的 class。请使用以下内容更新您的脚本

$(document).ready(function(){
      // Your class "multiple-items" will replace with "d1"
      $('.d1').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
    });

Answer 3

需要将 .multiple-items 替换为 d1，这是您在 jQuery 中的 class 名称。还要确保您的 cdn 或文件目录的路径是正确的。任何控制台错误？

CSS - 我无法使用简单的 Slick Carousel

CSS - I can't get a simple Slick Carousel to work

slick.js