Skip to content

Commit 4baecf9

Browse files
adamhb123adamhb123
authored
Merge pull request #281 from adamhb123/remove-carousel-max-height-add-carousel-scroll-down-button
Remove carousel max height, add carousel scroll down button, add carousel scroll down button, upgrade jquery, move js libs
2 parents 2665602 + cb71b88 commit 4baecf9

File tree

5 files changed

+108
-13
lines changed

5 files changed

+108
-13
lines changed

‎_includes/footer.html‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,4 @@
4747
</div>
4848
</footer>
4949

50-
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
51-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
52-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
53-
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
54-
<script src="/assets/js/slider.js"></script>
55-
<script src="/assets/js/nav.js"></script>
56-
<script src="/assets/js/footer.js"></script>
57-
<script src="/assets/js/sponsors.js"></script>
58-
<script src="/assets/js/tour.js"></script>
50+

‎_includes/head.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@
2121
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"/>
2222
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
2323
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
24+
25+
<!-- Javascript libraries -->
26+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
27+
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
28+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
29+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
30+
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
31+
<script src="/assets/js/slider.js"></script>
32+
<script src="/assets/js/nav.js"></script>
33+
<script src="/assets/js/footer.js"></script>
34+
<script src="/assets/js/sponsors.js"></script>
35+
<script src="/assets/js/tour.js"></script>
2436

2537
<!-- Getting more done after 2am than most people do all day! -->
2638
</head>

‎_sass/_slider.scss‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,49 @@
1+
$carousel-breakpoint: 600px;
2+
3+
$carousel-scroll-down-button-size-larger: 50px;
4+
$carousel-scroll-down-button-size-smaller: 25px;
5+
16
#slider {
27
width: 100%;
38
margin-bottom: 0;
49
height: auto;
5-
max-height: 80vh;
610
overflow-y: hidden;
711
& img {
812
width: 100%;
913
}
1014
background: $gray;
1115
}
16+
17+
#carousel-scroll-down-button {
18+
position: absolute;
19+
z-index: 98;
20+
left: 50vw;
21+
right: 0;
22+
width: auto;
23+
height: auto;
24+
background: none;
25+
border: none;
26+
padding: 0;
27+
cursor: pointer;
28+
}
29+
30+
#carousel-scroll-down-button:active, #carousel-scroll-down-button:focus {
31+
outline: 0;
32+
-moz-outline-style: none;
33+
}
34+
35+
#carousel-scroll-down-button > svg {
36+
max-width: $carousel-scroll-down-button-size-larger;
37+
width: $carousel-scroll-down-button-size-larger;
38+
height: auto;
39+
-webkit-filter: drop-shadow(0px 0px 2px black);
40+
filter: drop-shadow(0px 0px 2px black);
41+
}
42+
@media screen and (max-width: $carousel-breakpoint) {
43+
#carousel-scroll-down-button > svg {
44+
max-width: $carousel-scroll-down-button-size-smaller;
45+
}
46+
}
1247
.slick-prev {
1348
left: 10px;
1449
z-index: 2;

‎assets/js/slider.js‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,56 @@
1+
const SCROLL_ANIMATION_DURATION = 1000;
2+
const CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET = {X: -5, Y: -25};
3+
14
$(document).ready(() => {
2-
if ($('#slider').length) {
3-
$('#slider').slick({
5+
let slider = $("#slider");
6+
if(slider.length === 0) return;
7+
if (slider.length) {
8+
slider.slick({
49
dots: true,
510
autoplay: true,
611
autoplaySpeed: 5000,
712
mobileFirst: true,
813
swipe: true,
914
});
1015
}
16+
// Setup carousel scroll-down button click event
17+
let carousel_scroll_down_button = $("#carousel-scroll-down-button");
18+
if(carousel_scroll_down_button.length === 0) return;
19+
let scrollTopOffset = 1;
20+
carousel_scroll_down_button.on("click", () => {
21+
let calculateFinalPosition = () => slider.find("img").height() + scrollTopOffset - $("nav").outerHeight();
22+
let animateProperties = { scrollTop: calculateFinalPosition() }
23+
$("html, body").animate(animateProperties, {duration: SCROLL_ANIMATION_DURATION, specialEasing: {scrollTop: "easeOutCubic"}, step: function(now, fx) {fx.end = calculateFinalPosition();}} );
24+
carousel_scroll_down_button.blur();
25+
});
26+
27+
// Carousel arrow positioning function
28+
let recalculate_arrow_position = () => {
29+
let sliderBottom = slider.height() + slider.offset().top;
30+
let windowBottom = $(window).scrollTop() + $(window).height();
31+
if ($(window).scrollTop() > sliderBottom) {
32+
carousel_scroll_down_button.css("visibility", "hidden");
33+
} else {
34+
if(windowBottom < sliderBottom){
35+
carousel_scroll_down_button.css("transform", `translate3d(${-carousel_scroll_down_button.width()/2 + CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET.X}px, ${windowBottom-carousel_scroll_down_button.height() + CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET.Y}px,0px)`);
36+
} else{
37+
carousel_scroll_down_button.css("transform", `translate3d(${-carousel_scroll_down_button.width()/2 + CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET.X}px, ${slider.height()-carousel_scroll_down_button.height() + CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET.Y}px, 0px)`);
38+
}
39+
carousel_scroll_down_button.css("visibility", "visible");
40+
}
41+
}
42+
43+
// Position carousel scroll-down button
44+
$(window).on("scroll load resize focus blur", recalculate_arrow_position);
45+
// Set interval (necessary for ensuring positioning when resize events don't trigger properly)
46+
$(window).on("resize", () => {
47+
const maxLoops = 10;
48+
let loops = 0;
49+
let tempInterval = setInterval(() => {
50+
if(loops >= maxLoops) clearInterval(tempInterval);
51+
recalculate_arrow_position();
52+
loops++;
53+
}, 100);
54+
});
55+
recalculate_arrow_position();
1156
});

‎index.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@
33
active: home
44
---
55

6+
<div style="top:0;position:absolute;display: inline;">
7+
<!-- Floating scroll-down button -->
8+
<button id="carousel-scroll-down-button" aria-label="Scroll to the end/bottom of the image carousel">
9+
<svg xmlns="http://www.w3.org/2000/svg"
10+
viewBox="-20 -20 355 155">
11+
<path id="carousel-scroll-down-button-path"
12+
fill="none" stroke="white" stroke-width="25" stroke-linecap="round" opacity=".9"
13+
d="M 0 0 C 0 0 141.4 86.1 141.4 86.1 C 141.4 86.1 282.8 0 282.8 0" />
14+
</svg>
15+
</button>
16+
</div>
17+
618
<div id="slider">
719
<div>
820
<picture>
@@ -47,7 +59,6 @@
4759
</picture>
4860
</div>
4961
</div>
50-
5162
<div class="gray-wrapper">
5263
<div class="container spaced" id="homepage-about">
5364
<div class="row">

0 commit comments

Comments
 (0)