xxxxxxxxxx
$('.multiple-items').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 3
});
xxxxxxxxxx
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).on('ready', function () {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
</body>
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<title>Slick Slider Basic</title>
</head>
<body>
<div class="main">
<div class="slider slide-show">
<div class="img-wish">
<img src="img1.png" >
</div>
<div class="img-wish">
<img src="img2.png" >
</div>
<div class="img-wish">
<img src="img3.png" >
</div>
</div>
</div>
</body>
<script>
$('.slide-show').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: true,
fade: true,
});
</script>
</html>
xxxxxxxxxx
$('.responsive').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
]
});
xxxxxxxxxx
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 300,
infinite:true,
});
xxxxxxxxxx
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
xxxxxxxxxx
$('.variable-width').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true
});
xxxxxxxxxx
$('.variable-width').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
xxxxxxxxxx
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 2,
autoplay: true,
autoplaySpeed: 2000,
});
xxxxxxxxxx
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});