1CSS
2
3<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
4
5JS
6
7<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
8
9<script>
10$('#carousel').slick({
11 infinite: true,
12 slidesToShow: 3,
13 slidesToScroll: 1,
14 arrows: true,
15 autoplay: true,
16 autoplaySpeed: 2000,
17 responsive: [
18 {
19 breakpoint: 1200,
20 settings: {
21 slidesToShow: 2,
22 slidesToScroll: 1
23 }
24 },
25 {
26 breakpoint: 1008,
27 settings: {
28 slidesToShow: 1,
29 slidesToScroll: 1
30 }
31 },
32 {
33 breakpoint: 800,
34 settings: "unslick"
35 }
36
37 ]
38 });
39 </script>
1
2$('.autoplay').slick({
3 slidesToShow: 3,
4 slidesToScroll: 1,
5 autoplay: true,
6 autoplaySpeed: 300,
7 infinite:true,
8});
9
1
2$('.variable-width').slick({
3 dots: true,
4 infinite: true,
5 speed: 300,
6 slidesToShow: 1,
7 centerMode: true,
8 variableWidth: true
9});
10
1
2$('.one-time').slick({
3 dots: true,
4 infinite: true,
5 speed: 300,
6 slidesToShow: 1,
7 adaptiveHeight: true
8});
9
1
2$('.fade').slick({
3 dots: true,
4 infinite: true,
5 speed: 500,
6 fade: true,
7 cssEase: 'linear'
8});
9
1
2$('.autoplay').slick({
3 slidesToShow: 3,
4 slidesToScroll: 2,
5 autoplay: true,
6 autoplaySpeed: 2000,
7});
8