1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < title > Slick Playground</ title >
5+ < meta charset ="UTF-8 ">
6+ < link rel ="stylesheet " type ="text/css " href ="./slick/slick.css ">
7+ < link rel ="stylesheet " type ="text/css " href ="./slick/slick-theme.css ">
8+ < style type ="text/css ">
9+ html , body {
10+ margin : 0 ;
11+ padding : 0 ;
12+ }
13+
14+ * {
15+ box-sizing : border-box;
16+ }
17+
18+ .slider {
19+ width : 50% ;
20+ margin : 100px auto;
21+ }
22+
23+ .slick-slide {
24+ margin : 0px 20px ;
25+ }
26+
27+ .slick-slide img {
28+ width : 100% ;
29+ }
30+
31+ .slick-prev : before ,
32+ .slick-next : before {
33+ color : black;
34+ }
35+ </ style >
36+ </ head >
37+ < body >
38+
39+ < section class ="regular slider ">
40+ < div >
41+ < img src ="http://placehold.it/350x300?text=1 ">
42+ </ div >
43+ < div >
44+ < img src ="http://placehold.it/350x300?text=2 ">
45+ </ div >
46+ < div >
47+ < img src ="http://placehold.it/350x300?text=3 ">
48+ </ div >
49+ < div >
50+ < img src ="http://placehold.it/350x300?text=4 ">
51+ </ div >
52+ < div >
53+ < img src ="http://placehold.it/350x300?text=5 ">
54+ </ div >
55+ < div >
56+ < img src ="http://placehold.it/350x300?text=6 ">
57+ </ div >
58+ </ section >
59+
60+ < section class ="center slider ">
61+ < div >
62+ < img src ="http://placehold.it/350x300?text=1 ">
63+ </ div >
64+ < div >
65+ < img src ="http://placehold.it/350x300?text=2 ">
66+ </ div >
67+ < div >
68+ < img src ="http://placehold.it/350x300?text=3 ">
69+ </ div >
70+ < div >
71+ < img src ="http://placehold.it/350x300?text=4 ">
72+ </ div >
73+ < div >
74+ < img src ="http://placehold.it/350x300?text=5 ">
75+ </ div >
76+ < div >
77+ < img src ="http://placehold.it/350x300?text=6 ">
78+ </ div >
79+ < div >
80+ < img src ="http://placehold.it/350x300?text=7 ">
81+ </ div >
82+ < div >
83+ < img src ="http://placehold.it/350x300?text=8 ">
84+ </ div >
85+ < div >
86+ < img src ="http://placehold.it/350x300?text=9 ">
87+ </ div >
88+ </ section >
89+
90+ < section class ="variable slider ">
91+ < div >
92+ < img src ="http://placehold.it/350x300?text=1 ">
93+ </ div >
94+ < div >
95+ < img src ="http://placehold.it/200x300?text=2 ">
96+ </ div >
97+ < div >
98+ < img src ="http://placehold.it/100x300?text=3 ">
99+ </ div >
100+ < div >
101+ < img src ="http://placehold.it/200x300?text=4 ">
102+ </ div >
103+ < div >
104+ < img src ="http://placehold.it/350x300?text=5 ">
105+ </ div >
106+ < div >
107+ < img src ="http://placehold.it/300x300?text=6 ">
108+ </ div >
109+ </ section >
110+
111+ < script src ="https://code.jquery.com/jquery-2.2.0.min.js " type ="text/javascript "> </ script >
112+ < script src ="./slick/slick.js " type ="text/javascript " charset ="utf-8 "> </ script >
113+ < script type ="text/javascript ">
114+ $ ( document ) . on ( 'ready' , function ( ) {
115+ $ ( ".regular" ) . slick ( {
116+ dots : true ,
117+ infinite : true ,
118+ slidesToShow : 3 ,
119+ slidesToScroll : 3
120+ } ) ;
121+ $ ( ".center" ) . slick ( {
122+ dots : true ,
123+ infinite : true ,
124+ centerMode : true ,
125+ slidesToShow : 3 ,
126+ slidesToScroll : 3
127+ } ) ;
128+ $ ( ".variable" ) . slick ( {
129+ dots : true ,
130+ infinite : true ,
131+ variableWidth : true
132+ } ) ;
133+ } ) ;
134+ </ script >
135+
136+ </ body >
137+ </ html >
0 commit comments