CODEWITHSUNDEEP
htmljquerycssslick.js
Ityka Bandta
Ityka Bandta

Reputation: 105

How to implement slider feature in slick js?

I am trying to create a simple carousel slider using Slick and I have got everything in place as mentioned in the docs but I cannot see any slider arrows or any feature to make the cards slide.

Below is my code -

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- (using responsive one)

$(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
        ]
    });
  });

What am I missing ?

I'll appreciate your help. Thanks !

Upvotes: 0

Views: 3204

Answers (1)

Prakhar
Prakhar

Reputation: 1485

Arrows will only appear if the number of slides are more than value of slidesToShow. And since its value is 4 by default, the arrows will not appear. Also, the arrow are white by default, so they will not be visible on a white page. Give them a different color to make them visible. Apart from this, the buttons also have negative offsets. Wrap the slick container inside a wrapper which is smaller than the maximum width available or give it a padding to counter the offsets.

Here is the working example

$(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>

Upvotes: 2

Related Questions