1 |
|
2 |
|
3 |
|
4 |
|
5 | .ant-carousel {
|
6 | box-sizing: border-box;
|
7 | margin: 0;
|
8 | padding: 0;
|
9 | color: rgba(0, 0, 0, 0.85);
|
10 | font-size: 14px;
|
11 | font-variant: tabular-nums;
|
12 | line-height: 1.5715;
|
13 | list-style: none;
|
14 | font-feature-settings: 'tnum';
|
15 | }
|
16 | .ant-carousel .slick-slider {
|
17 | position: relative;
|
18 | display: block;
|
19 | box-sizing: border-box;
|
20 | touch-action: pan-y;
|
21 | -webkit-touch-callout: none;
|
22 | -webkit-tap-highlight-color: transparent;
|
23 | }
|
24 | .ant-carousel .slick-list {
|
25 | position: relative;
|
26 | display: block;
|
27 | margin: 0;
|
28 | padding: 0;
|
29 | overflow: hidden;
|
30 | }
|
31 | .ant-carousel .slick-list:focus {
|
32 | outline: none;
|
33 | }
|
34 | .ant-carousel .slick-list.dragging {
|
35 | cursor: pointer;
|
36 | }
|
37 | .ant-carousel .slick-list .slick-slide {
|
38 | pointer-events: none;
|
39 | }
|
40 | .ant-carousel .slick-list .slick-slide input.ant-radio-input,
|
41 | .ant-carousel .slick-list .slick-slide input.ant-checkbox-input {
|
42 | visibility: hidden;
|
43 | }
|
44 | .ant-carousel .slick-list .slick-slide.slick-active {
|
45 | pointer-events: auto;
|
46 | }
|
47 | .ant-carousel .slick-list .slick-slide.slick-active input.ant-radio-input,
|
48 | .ant-carousel .slick-list .slick-slide.slick-active input.ant-checkbox-input {
|
49 | visibility: visible;
|
50 | }
|
51 | .ant-carousel .slick-list .slick-slide > div > div {
|
52 | vertical-align: bottom;
|
53 | }
|
54 | .ant-carousel .slick-slider .slick-track,
|
55 | .ant-carousel .slick-slider .slick-list {
|
56 | transform: translate3d(0, 0, 0);
|
57 | touch-action: pan-y;
|
58 | }
|
59 | .ant-carousel .slick-track {
|
60 | position: relative;
|
61 | top: 0;
|
62 | left: 0;
|
63 | display: block;
|
64 | }
|
65 | .ant-carousel .slick-track::before,
|
66 | .ant-carousel .slick-track::after {
|
67 | display: table;
|
68 | content: '';
|
69 | }
|
70 | .ant-carousel .slick-track::after {
|
71 | clear: both;
|
72 | }
|
73 | .slick-loading .ant-carousel .slick-track {
|
74 | visibility: hidden;
|
75 | }
|
76 | .ant-carousel .slick-slide {
|
77 | display: none;
|
78 | float: left;
|
79 | height: 100%;
|
80 | min-height: 1px;
|
81 | }
|
82 | .ant-carousel .slick-slide img {
|
83 | display: block;
|
84 | }
|
85 | .ant-carousel .slick-slide.slick-loading img {
|
86 | display: none;
|
87 | }
|
88 | .ant-carousel .slick-slide.dragging img {
|
89 | pointer-events: none;
|
90 | }
|
91 | .ant-carousel .slick-initialized .slick-slide {
|
92 | display: block;
|
93 | }
|
94 | .ant-carousel .slick-loading .slick-slide {
|
95 | visibility: hidden;
|
96 | }
|
97 | .ant-carousel .slick-vertical .slick-slide {
|
98 | display: block;
|
99 | height: auto;
|
100 | }
|
101 | .ant-carousel .slick-arrow.slick-hidden {
|
102 | display: none;
|
103 | }
|
104 | .ant-carousel .slick-prev,
|
105 | .ant-carousel .slick-next {
|
106 | position: absolute;
|
107 | top: 50%;
|
108 | display: block;
|
109 | width: 20px;
|
110 | height: 20px;
|
111 | margin-top: -10px;
|
112 | padding: 0;
|
113 | color: transparent;
|
114 | font-size: 0;
|
115 | line-height: 0;
|
116 | background: transparent;
|
117 | border: 0;
|
118 | outline: none;
|
119 | cursor: pointer;
|
120 | }
|
121 | .ant-carousel .slick-prev:hover,
|
122 | .ant-carousel .slick-next:hover,
|
123 | .ant-carousel .slick-prev:focus,
|
124 | .ant-carousel .slick-next:focus {
|
125 | color: transparent;
|
126 | background: transparent;
|
127 | outline: none;
|
128 | }
|
129 | .ant-carousel .slick-prev:hover::before,
|
130 | .ant-carousel .slick-next:hover::before,
|
131 | .ant-carousel .slick-prev:focus::before,
|
132 | .ant-carousel .slick-next:focus::before {
|
133 | opacity: 1;
|
134 | }
|
135 | .ant-carousel .slick-prev.slick-disabled::before,
|
136 | .ant-carousel .slick-next.slick-disabled::before {
|
137 | opacity: 0.25;
|
138 | }
|
139 | .ant-carousel .slick-prev {
|
140 | left: -25px;
|
141 | }
|
142 | .ant-carousel .slick-prev::before {
|
143 | content: '←';
|
144 | }
|
145 | .ant-carousel .slick-next {
|
146 | right: -25px;
|
147 | }
|
148 | .ant-carousel .slick-next::before {
|
149 | content: '→';
|
150 | }
|
151 | .ant-carousel .slick-dots {
|
152 | position: absolute;
|
153 | right: 0;
|
154 | bottom: 0;
|
155 | left: 0;
|
156 | z-index: 15;
|
157 | display: flex !important;
|
158 | justify-content: center;
|
159 | margin-right: 15%;
|
160 | margin-bottom: 0;
|
161 | margin-left: 15%;
|
162 | padding-left: 0;
|
163 | list-style: none;
|
164 | }
|
165 | .ant-carousel .slick-dots-bottom {
|
166 | bottom: 12px;
|
167 | }
|
168 | .ant-carousel .slick-dots-top {
|
169 | top: 12px;
|
170 | bottom: auto;
|
171 | }
|
172 | .ant-carousel .slick-dots li {
|
173 | position: relative;
|
174 | display: inline-block;
|
175 | flex: 0 1 auto;
|
176 | box-sizing: content-box;
|
177 | width: 16px;
|
178 | height: 3px;
|
179 | margin: 0 4px;
|
180 | padding: 0;
|
181 | text-align: center;
|
182 | text-indent: -999px;
|
183 | vertical-align: top;
|
184 | transition: all 0.5s;
|
185 | }
|
186 | .ant-carousel .slick-dots li button {
|
187 | position: relative;
|
188 | display: block;
|
189 | width: 100%;
|
190 | height: 3px;
|
191 | padding: 0;
|
192 | color: transparent;
|
193 | font-size: 0;
|
194 | background: #fff;
|
195 | border: 0;
|
196 | border-radius: 1px;
|
197 | outline: none;
|
198 | cursor: pointer;
|
199 | opacity: 0.3;
|
200 | transition: all 0.5s;
|
201 | }
|
202 | .ant-carousel .slick-dots li button:hover,
|
203 | .ant-carousel .slick-dots li button:focus {
|
204 | opacity: 0.75;
|
205 | }
|
206 | .ant-carousel .slick-dots li button::after {
|
207 | position: absolute;
|
208 | top: -4px;
|
209 | right: -4px;
|
210 | bottom: -4px;
|
211 | left: -4px;
|
212 | content: '';
|
213 | }
|
214 | .ant-carousel .slick-dots li.slick-active {
|
215 | width: 24px;
|
216 | }
|
217 | .ant-carousel .slick-dots li.slick-active button {
|
218 | background: #fff;
|
219 | opacity: 1;
|
220 | }
|
221 | .ant-carousel .slick-dots li.slick-active:hover,
|
222 | .ant-carousel .slick-dots li.slick-active:focus {
|
223 | opacity: 1;
|
224 | }
|
225 | .ant-carousel-vertical .slick-dots {
|
226 | top: 50%;
|
227 | bottom: auto;
|
228 | flex-direction: column;
|
229 | width: 3px;
|
230 | height: auto;
|
231 | margin: 0;
|
232 | transform: translateY(-50%);
|
233 | }
|
234 | .ant-carousel-vertical .slick-dots-left {
|
235 | right: auto;
|
236 | left: 12px;
|
237 | }
|
238 | .ant-carousel-vertical .slick-dots-right {
|
239 | right: 12px;
|
240 | left: auto;
|
241 | }
|
242 | .ant-carousel-vertical .slick-dots li {
|
243 | width: 3px;
|
244 | height: 16px;
|
245 | margin: 4px 0;
|
246 | vertical-align: baseline;
|
247 | }
|
248 | .ant-carousel-vertical .slick-dots li button {
|
249 | width: 3px;
|
250 | height: 16px;
|
251 | }
|
252 | .ant-carousel-vertical .slick-dots li.slick-active {
|
253 | width: 3px;
|
254 | height: 24px;
|
255 | }
|
256 | .ant-carousel-vertical .slick-dots li.slick-active button {
|
257 | width: 3px;
|
258 | height: 24px;
|
259 | }
|
260 | .ant-carousel-rtl {
|
261 | direction: rtl;
|
262 | }
|
263 | .ant-carousel-rtl .ant-carousel .slick-track {
|
264 | right: 0;
|
265 | left: auto;
|
266 | }
|
267 | .ant-carousel-rtl .ant-carousel .slick-prev {
|
268 | right: -25px;
|
269 | left: auto;
|
270 | }
|
271 | .ant-carousel-rtl .ant-carousel .slick-prev::before {
|
272 | content: '→';
|
273 | }
|
274 | .ant-carousel-rtl .ant-carousel .slick-next {
|
275 | right: auto;
|
276 | left: -25px;
|
277 | }
|
278 | .ant-carousel-rtl .ant-carousel .slick-next::before {
|
279 | content: '←';
|
280 | }
|
281 | .ant-carousel-rtl.ant-carousel .slick-dots {
|
282 | flex-direction: row-reverse;
|
283 | }
|
284 | .ant-carousel-rtl.ant-carousel-vertical .slick-dots {
|
285 | flex-direction: column;
|
286 | }
|
287 | nz-carousel {
|
288 | position: relative;
|
289 | display: block;
|
290 | width: 100%;
|
291 | height: 100%;
|
292 | overflow: hidden;
|
293 | }
|
294 | .slick-dots {
|
295 | display: block;
|
296 | }
|
297 | .slick-track {
|
298 | opacity: 1;
|
299 | }
|
300 | .slick-list {
|
301 | direction: ltr;
|
302 | }
|