<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css">
</link>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css">
</link>
<div class='container'>
<!-- <div class="intro">hello</div> -->
<div class='slides'>
<div class="slide">
<span>1</span>
</div>
<div class="slide">
<span>2</span>
</div>
<div class="slide">
<span>3</span>
</div>
<div class="slide">
<span>4</span>
</div>
<div class="slide">
<span>5</span>
</div>
<div class="slide">
<span>6</span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
html,
body {
height: 100vh;
overflow-x: hidden;
}
body {
background: red;
margin: 0;
}
.intro {
height: 100vh;
width: 100%;
background: #999;
}
.container {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100vh;
color: #333;
}
.slick-track,
.slick-list {
height: 100vh;
}
.slick-dotted.slick-slider {
margin: 0;
}
.slides {
width: 100%;
height: 100vh;
}
.slides .slide {
color: #419be0;
background: white;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
.slick-dots {
position: absolute;
bottom: 20px;
left: 20px;
text-align: left;
}
.slick-dots li {
display: block;
}
// debounce from underscore.js
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this,
args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// use x and y mousewheel event data to navigate flickity
function slick_handle_wheel_event(e, slick_instance, slick_is_animating) {
// do not trigger a slide change if another is being animated
if (!slick_is_animating) {
// pick the larger of the two delta magnitudes (x or y) to determine nav direction
var direction =
Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
console.log("wheel scroll ", e.deltaX, e.deltaY, direction);
if (direction > 0) {
// next slide
slick_instance.slick("slickNext");
} else {
// prev slide
slick_instance.slick("slickPrev");
}
}
}
// debounce the wheel event handling since trackpads can have a lot of inertia
var slick_handle_wheel_event_debounced = debounce(
slick_handle_wheel_event,
100,
true
);
// init slider
const slick_2 = $(".slides");
slick_2.slick({
dots: true,
vertical: true,
// verticalSwiping: true,
arrows: false
});
var slick_2_is_animating = false;
slick_2.on("afterChange", function (index) {
console.log("Slide after change " + index);
slick_2_is_animating = false;
});
slick_2.on("beforeChange", function (index) {
console.log("Slide before change " + index);
slick_2_is_animating = true;
});
slick_2.on("wheel", function (e) {
slick_handle_wheel_event_debounced(
e.originalEvent,
slick_2,
slick_2_is_animating
);
});
