Как реализовать функцию слайдера в slick js? - PullRequest
Новая
       141

Как реализовать функцию слайдера в slick js?

0 голосов
/ 05 августа 2020

Я пытаюсь создать простой слайдер-карусель с помощью 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
        ]
    });
  });

Что мне не хватает?

Буду признателен за вашу помощь. Спасибо!

1 Ответ

1 голос
/ 05 августа 2020

Стрелки появятся, только если количество слайдов больше, чем значение 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>
...