时间戳

首页 > 解决方案 > 如何在 slick js 中实现滑块功能？

html - 如何在 slick js 中实现滑块功能？

问题描述

我正在尝试使用 Slick 创建一个简单的轮播滑块，并且我已经按照文档中的说明完成了所有工作，但我看不到任何滑块箭头或任何使卡片滑动的功能。

下面是我的代码 -

HTML

<html lang="en">

<head>
    <title>Card-Component</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--Other CSS-->
    <link rel="stylesheet" href="test.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
    <!-- Poppins font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>

<body>
    
  <div class="your-class">
    <div><img  src="./assets/cardone.png" alt="Card image" /></div>
    <div><img  src="./assets/cardone.png" alt="Card image" /></div>
    <div><img  src="./assets/cardone.png" alt="Card image" /></div>
  </div>
    
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src="test.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>

</html>

Slick Jquery-（使用响应式）

$(document).ready(function(){
    $('.your-class').slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 3,
              infinite: true,
              dots: true
            }
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
          // You can unslick at a given breakpoint now by adding:
          // settings: "unslick"
          // instead of a settings object
        ]
    });
  });

我错过了什么？

我会感谢你的帮助。谢谢 ！

标签： htmljquerycssslick.js

解决方案

仅当幻灯片数量大于 的值时才会出现箭头slidesToShow。而且由于它的值是4默认值，所以箭头不会出现。此外，箭头默认为白色，因此它们不会在白页上可见。给它们不同的颜色以使它们可见。除此之外，按钮也有负偏移。将光滑的容器包裹在一个小于可用最大宽度的包装器中，或者给它一个填充以抵消偏移量。

这是工作示例

$(document).ready(function() {
  $('.your-class').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });
});
.slick-prev:before,
.slick-next:before {
  color: red !important;
}

.wrapper {
  margin: auto;
  width: 90%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<div class="wrapper">
  <div class="your-class">
    <div><img src="https://picsum.photos/200" alt="Card image" /></div>
    <div><img src="https://picsum.photos/200" alt="Card image" /></div>
    <div><img src="https://picsum.photos/200" alt="Card image" /></div>
    <div><img src="https://picsum.photos/200" alt="Card image" /></div>
    <div><img src="https://picsum.photos/200" alt="Card image" /></div>
    <div><img src="https://picsum.photos/200" alt="Card image" /></div>
  </div>
</div>

推荐阅读