The slider scroll?

Hello. I need to implement a slider on scroll, which runs thus:
The user went to the page and scrollit down when it comes to the slider continues to scroll, then scroll the slider until you reach the last item, and then you have to scroll the page itself. Also, if he starts to scroll the page from the bottom to the top as well
reaching the slider should prosquality it to the first element and then scroll up the page.

Did something similar, but it works so good, maybe you have an idea or examples similar to what I wrote above.
Here's what I came up with:
<div class="slider" id="slider">
 <div class="slick-block">
 <div class="slick-image">
 <img class="image-item" src="/build/images/cool_carousel_1.jpg" alt="" >
</div>
</div>
 <div class="slick-block">
 <div class="slick-image">
 <img class="image-item" src="/build/images/cool_carousel_2.jpg" alt="" >
</div>
</div>
 <div class="slick-block">
 <div class="slick-image">
 <img class="image-item" src="/build/images/cool_carousel_3.jpg" alt="" >
</div>
</div>
 <div class="slick-block">
 <div class="slick-image">
 <img class="image-item" src="/build/images/cool_carousel_4.jpg" alt="" >
</div>
</div>
 </div>


var $slider = $("#slider");
 $slider.on('init', function () {
mouseWheel($slider);
}).
slick({
 dots: true,
 vertical: true,
 infinite: false });

 function mouseWheel($slider) {
 $('.slick-slider').on('wheel', { $slider: $slider }, mouseWheelHandler);
}
 function mouseWheelHandler(event) {
event.preventDefault();
 var $slider = event.data.$slider;
 var delta = event.originalEvent.deltaY;
 if (delta > 0) {
$slider.slick('slickNext');

 } else
{
$slider.slick('slickPrev');
}
}



 $slider.on('afterChange', function(event, slick, currentSlide) {
 if (slick.$slides.length-1 == currentSlide) {
$('.slick-slider').off('wheel');
}
 if (currentSlide == 0) {
$('.slick-slider').off('wheel');
}
});

$(window).on('scroll',function(event){
 if ( $('.slick-slider:hover').length > 0 ){
mouseWheel($slider);
}
 });
March 19th 20 at 08:59
1 answer
March 19th 20 at 09:01
Solution
Here is an excellent and widely used library for such extravagances scrollmagic.io

And if very, then of course, will have to track the scroll and an achievement scroll to specific DOM elements and manipulation of the behavior of the scroll. All this can be done using jQuery.
Polska link again

Well, here it is necessary to pay attention of course How can I track scroll up and down separately? there is a good library to detect the direction of scrolling is recommended
https://github.com/Promo/wheel-indicator
Redid the block using scrollmagic, thank You. - Doug.Donnelly48 commented on March 19th 20 at 09:04
@Doug.Donnelly48, can you tell me how you came to realize this task ? - arnaldo.John commented on March 19th 20 at 09:07

Find more questions by tags jQueryJavaScript