summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorIsmaël Bouya <ismael.bouya@normalesup.org>2017-01-20 01:28:44 +0100
committerIsmaël Bouya <ismael.bouya@normalesup.org>2017-01-20 01:28:44 +0100
commit604734c4a960aac3d99f1008337181ed2b0f04db (patch)
tree0cc5a4a9c958edce1b28366a446b75f6a720f6dc /index.html
downloadludivine-slick-component-604734c4a960aac3d99f1008337181ed2b0f04db.tar.gz
ludivine-slick-component-604734c4a960aac3d99f1008337181ed2b0f04db.tar.zst
ludivine-slick-component-604734c4a960aac3d99f1008337181ed2b0f04db.zip
Validation initialeHEAD1.6.0master
Diffstat (limited to 'index.html')
-rw-r--r--index.html137
1 files changed, 137 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c8fab56
--- /dev/null
+++ b/index.html
@@ -0,0 +1,137 @@
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> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 13:39:20 +0000