Skip to content

Commit 5bf17d3

Browse files
ivanvermeyenivanvermeyen
committed
Use auto slide height by default
1 parent ac7a59a commit 5bf17d3

File tree

3 files changed

+35
-31
lines changed

3 files changed

+35
-31
lines changed

‎public/css/slider.css‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ <h3>With links</h3>
131131
<div class="slide">
132132
<a href="#" class="slide-image">
133133
<i class="fa fa-search-plus slide-image-hoverlay"></i>
134-
<img src="https://unsplash.it/201/300/">
134+
<img src="https://unsplash.it/201/200/">
135135
<span class="slide-image-caption">
136136
Optional image caption here!
137137
</span>
@@ -141,7 +141,7 @@ <h3>With links</h3>
141141
<div class="slide">
142142
<a href="#" class="slide-image">
143143
<i class="fa fa-search-plus slide-image-hoverlay"></i>
144-
<img src="https://unsplash.it/501/300/">
144+
<img src="https://unsplash.it/501/200/">
145145
<span class="slide-image-caption">
146146
Optional image caption here!
147147
</span>
@@ -151,70 +151,70 @@ <h3>With links</h3>
151151
<div class="slide">
152152
<a href="#" class="slide-image">
153153
<i class="fa fa-search-plus slide-image-hoverlay"></i>
154-
<img src="https://unsplash.it/301/300/">
154+
<img src="https://unsplash.it/301/200/">
155155
</a>
156156
</div>
157157

158158
<div class="slide">
159159
<a href="#" class="slide-image">
160160
<i class="fa fa-search-plus slide-image-hoverlay"></i>
161-
<img src="https://unsplash.it/401/300/">
161+
<img src="https://unsplash.it/401/200/">
162162
</a>
163163
</div>
164164

165165
<div class="slide">
166166
<a href="#" class="slide-image">
167167
<i class="fa fa-search-plus slide-image-hoverlay"></i>
168-
<img src="https://unsplash.it/502/300/">
168+
<img src="https://unsplash.it/502/200/">
169169
</a>
170170
</div>
171171

172172
<div class="slide">
173173
<a href="#" class="slide-image">
174174
<i class="fa fa-search-plus slide-image-hoverlay"></i>
175-
<img src="https://unsplash.it/202/300/">
175+
<img src="https://unsplash.it/202/200/">
176176
</a>
177177
</div>
178178

179179
<div class="slide">
180180
<a href="#" class="slide-image">
181181
<i class="fa fa-search-plus slide-image-hoverlay"></i>
182-
<img src="https://unsplash.it/302/300/">
182+
<img src="https://unsplash.it/302/200/">
183183
</a>
184184
</div>
185185

186186
<div class="slide">
187187
<a href="#" class="slide-image">
188188
<i class="fa fa-search-plus slide-image-hoverlay"></i>
189-
<img src="https://unsplash.it/402/300/">
189+
<img src="https://unsplash.it/402/200/">
190190
</a>
191191
</div>
192192

193193
<div class="slide">
194194
<a href="#" class="slide-image">
195195
<i class="fa fa-search-plus slide-image-hoverlay"></i>
196-
<img src="https://unsplash.it/503/300/">
196+
<img src="https://unsplash.it/503/200/">
197197
</a>
198198
</div>
199199

200200
<div class="slide">
201201
<a href="#" class="slide-image">
202202
<i class="fa fa-search-plus slide-image-hoverlay"></i>
203-
<img src="https://unsplash.it/203/300/">
203+
<img src="https://unsplash.it/203/200/">
204204
</a>
205205
</div>
206206

207207
<div class="slide">
208208
<a href="#" class="slide-image">
209209
<i class="fa fa-search-plus slide-image-hoverlay"></i>
210-
<img src="https://unsplash.it/504/300/">
210+
<img src="https://unsplash.it/504/200/">
211211
</a>
212212
</div>
213213

214214
<div class="slide">
215215
<a href="#" class="slide-image">
216216
<i class="fa fa-search-plus slide-image-hoverlay"></i>
217-
<img src="https://unsplash.it/204/300/">
217+
<img src="https://unsplash.it/204/200/">
218218
</a>
219219
</div>
220220

@@ -236,28 +236,28 @@ <h3>With simple DIV's</h3>
236236
<div class="slide">
237237
<div class="slide-image">
238238
<span class="slide-image-hoverlay">TEXT</span>
239-
<img src="https://unsplash.it/500/300/">
239+
<img src="https://unsplash.it/500/200/">
240240
</div>
241241
</div>
242242

243243
<div class="slide">
244244
<div class="slide-image">
245245
<span class="slide-image-hoverlay">TEXT</span>
246-
<img src="https://unsplash.it/200/300/">
246+
<img src="https://unsplash.it/200/200/">
247247
</div>
248248
</div>
249249

250250
<div class="slide">
251251
<div class="slide-image">
252252
<span class="slide-image-hoverlay">TEXT</span>
253-
<img src="https://unsplash.it/300/300/">
253+
<img src="https://unsplash.it/300/200/">
254254
</div>
255255
</div>
256256

257257
<div class="slide">
258258
<div class="slide-image">
259259
<span class="slide-image-hoverlay">TEXT</span>
260-
<img src="https://unsplash.it/400/300/">
260+
<img src="https://unsplash.it/400/200/">
261261
</div>
262262
</div>
263263

@@ -279,7 +279,7 @@ <h3>Single image</h3>
279279
<div class="slide">
280280
<div class="slide-image">
281281
<span class="slide-image-hoverlay">TEXT</span>
282-
<img src="https://unsplash.it/600/300/">
282+
<img src="https://unsplash.it/600/200/">
283283
</div>
284284
</div>
285285

@@ -310,7 +310,7 @@ <h3>Full width slides with centered content</h3>
310310
<div class="slide">
311311
<a href="#" class="slide-image">
312312
<span class="slide-image-hoverlay">TEXT</span>
313-
<img src="https://unsplash.it/200/300/">
313+
<img src="https://unsplash.it/200/200/">
314314
<span class="slide-image-caption">
315315
Optional image caption here!
316316
</span>
@@ -320,7 +320,7 @@ <h3>Full width slides with centered content</h3>
320320
<div class="slide">
321321
<a href="#" class="slide-image">
322322
<span class="slide-image-hoverlay">TEXT</span>
323-
<img src="https://unsplash.it/400/300/">
323+
<img src="https://unsplash.it/400/200/">
324324
</a>
325325
</div>
326326

@@ -349,7 +349,7 @@ <h3>Full width slides with covered content</h3>
349349
<div class="slide">
350350
<a href="#" class="slide-image">
351351
<span class="slide-image-hoverlay">TEXT</span>
352-
<img src="https://unsplash.it/200/300/">
352+
<img src="https://unsplash.it/200/200/">
353353
<span class="slide-image-caption">
354354
Optional image caption here!
355355
</span>
@@ -359,7 +359,7 @@ <h3>Full width slides with covered content</h3>
359359
<div class="slide">
360360
<a href="#" class="slide-image">
361361
<span class="slide-image-hoverlay">TEXT</span>
362-
<img src="https://unsplash.it/600/300/">
362+
<img src="https://unsplash.it/600/200/">
363363
</a>
364364
</div>
365365

@@ -386,14 +386,14 @@ <h3>Full width slides with covered content</h3>
386386
<div class="slide">
387387
<a href="#" class="slide-image">
388388
<span class="slide-image-hoverlay">TEXT</span>
389-
<img src="https://unsplash.it/600/300/" class="slide-image-background">
389+
<img src="https://unsplash.it/600/200/" class="slide-image-background">
390390
</a>
391391
</div>
392392

393393
<div class="slide">
394394
<a href="#" class="slide-image">
395395
<span class="slide-image-hoverlay">TEXT</span>
396-
<img src="https://unsplash.it/700/300/" class="slide-image-background">
396+
<img src="https://unsplash.it/700/200/" class="slide-image-background">
397397
</a>
398398
</div>
399399

@@ -418,14 +418,14 @@ <h3>Content slider</h3>
418418
<div class="slider-viewport">
419419
<div class="slider-track">
420420

421-
<div class="slide" data-zoom-background="https://unsplash.it/600/300/">
421+
<div class="slide" data-zoom-background="https://unsplash.it/600/200/">
422422
<div class="slide-overlay">
423423
<h1>Hello World</h1>
424424
<p>With overlay and zoom!</p>
425425
</div>
426426
</div>
427427

428-
<div class="slide" data-background="https://unsplash.it/500/300/">
428+
<div class="slide" data-background="https://unsplash.it/500/200/">
429429
<h1>Hello Universe</h1>
430430
<p>Without overlay and zoom!</p>
431431
</div>
@@ -445,14 +445,14 @@ <h1>Hello Universe</h1>
445445
<div class="slider-viewport">
446446
<div class="slider-track">
447447

448-
<div class="slide" data-zoom-background="https://unsplash.it/600/300/">
448+
<div class="slide" data-zoom-background="https://unsplash.it/600/200/">
449449
<div class="slide-overlay" style="padding: 0 1em;">
450450
<h1>Hello World</h1>
451451
<p>With overlay and zoom!</p>
452452
</div>
453453
</div>
454454

455-
<div class="slide" data-background="https://unsplash.it/500/300/" style="padding: 0 1em;">
455+
<div class="slide" data-background="https://unsplash.it/500/200/" style="padding: 0 1em;">
456456
<h1>Hello Universe</h1>
457457
<p>Without overlay and zoom!</p>
458458
</div>

‎src/scss/_variables.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $slide-vertical-align: center !default; //=> choose: center, flex-start (top) or
2020
// slide dimensions and spacing
2121
$slide-width: auto !default; // choose: auto or any width (in pixels or percentage of viewport)
2222
$slide-max-width: 100% !default; // choose: none (allow any width), 100% (crop slides to fit viewport) or any other width
23-
$slide-height: 200px !default; // choose: auto or any height (in pixels)
23+
$slide-height: auto !default; // choose: auto or any height (in pixels)
2424
$slide-margin: 0 !default; // space between 2 slides
2525

2626
// slide default text color
@@ -53,6 +53,10 @@ $include-default-slide-image-styles: true !default;
5353
// if $slide-height is set to auto.
5454
$slide-image-max-height: $slide-height !default; //=> choose: none or any value
5555

56+
@if ($slide-height == auto) {
57+
$slide-image-max-height: none !default; //=> choose: none or any value
58+
}
59+
5660
// zoom the image on hover
5761
$slide-image-transform-hover: scale(1.1) !default; //=> choose: none or any transform
5862
$slide-image-transform-speed: 300ms !default;

0 commit comments

Comments
 (0)