How to implement slider feature in slick js?
Question
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 !
1 answers
solution1
1 2020-08-05 11:14:37
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.