时间戳

首页 > 解决方案 > 如何在 slick 中设置按钮的样式和位置？

slick.js - 如何在 slick 中设置按钮的样式和位置？

问题描述

我正在尝试使光滑滑块中的按钮和“点菜单”可见。

我在 jsfiddle 中的示例看起来不错，但缺少项目下方的“点菜单”：我的光滑示例

在“真实生活”中，我的实现如下所示：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
    <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://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.min.js"></script>

     <style >
        .variants {
          cursor: pointer;
          border: 1px solid #CDCDCD;
          width: 192px;
          height: 223px;
          float: left;
        }
    </style>
</head>
<body>

    <div class="variants-container">
      <div class="variants">test</div>
      <div class="variants">test</div>
      <div class="variants">test</div>
      <div class="variants">test</div>
    </div>

      <script type="text/javascript" src="https://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.min.js"></script>
      <script type="text/javascript">
        $('.variants-container').slick({
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3
        });
      </script>

</body>
</html>

项目集顶部有按钮，而不是左侧项目顶部的漂亮圆形按钮。

没有 slick/slick-theme.css

期望的实现：

在此处输入图像描述

如何获得按钮的所需状态并在每组底部显示点指示器？

标签： slick.js

解决方案

下面的代码按您的预期工作，问题是您两次包含 jquery 文件，一次在头部，一次在正文末尾。您还忘记在“slick.css”之后包含“slick-theme.css”

根据文档，要获取轮播底部的点，只需添加dots: true设置

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<html>
<head>
<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" />
<style>
html,
body {
  padding: 20px;
  background-color: #CCC;
}

.variants {
  cursor: pointer;
  border: 1px solid #CDCDCD;
  width: 192px;
  height: 223px;
  float: left;
}
</style>
</head>
<body>

    <div class="variants-container">
      <div class="variants">test</div>
      <div class="variants">test</div>
      <div class="variants">test</div>
      <div class="variants">test</div>
    </div>

<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://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.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.variants-container').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3,
      dots: true
    });
  });
  
</script>

</body>
</html>

推荐阅读