]>
Commit | Line | Data |
---|---|---|
604734c4 IB |
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> |