Здравствуйте. Мне необходимо реализовать слайдер по скроллу, который работает таким образом:
Пользователь зашел на страницу и скролит вниз, когда он доходит до слайдера и продолжает скролить, то пролистывается слайдер пока не достигнет последнего айтема и после этого идет скрол самой страницы. Так же если он начинает скролить страницу с низу в верх, то так же
доходя до слайдера должен проскролить его до первого элемента и после этого скролить вверх страницу.
Сделал нечто похожее, но работает плоховато, может вы подкинете идею или примеры похожее на то, что я писал выше.
Вот собственно, что у меня вышло:
<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);
}
});
