Помогите, господа, разбирающиеся.
Наворотил я велосипед. Всё отлично работает, если не совмещать скролл и клик.
В случае совмещения слайдер пролистывает пустые блоки.
Правый слайдер вертикальный
https://jetrus.ru/catalog/tokarnye-s...arnyy-stanok-/
document.addEventListener('DOMContentLoaded', function() {
var slides = document.querySelectorAll('.acs-slide'),
slider = document.querySelectorAll('.acs-slider')[0],
next = document.querySelector('.acs-next'),
prev = document.querySelector('.acs-prev');
longSlider = slides.length, // * 160
current = 0;
if(slides === null || slider === null ) { return; }
$('.acs-slider').on('mousewheel DOMMouseScroll', function(e) {
var evt = e.originalEvent,
slideLong = 160 / 120,
scrollTo = (e.type == 'DOMMouseScroll' ? evt.detail * 40 : evt.wheelDelta * -1) * slideLong;
if (scrollTo ) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
current = slider.scrollTop;
var sliderHeight = slider.scrollHeight - current;
console.log(sliderHeight, current);
}
if(Math.abs(current) === sliderHeight) {
console.log(current);
}
if(current === 0) {
console.log(current);
return false;
}
e.stopPropagation();
e.preventDefault();
});
if(longSlider > 2) {
var slidePosition;
longSlider = longSlider * 160;
next.addEventListener('click', function(event) {
event.preventDefault();
[].forEach.call(slides, function(slide, index) {
var currentPosition = slider.scrollTop;
if(current === 0) {
currentPosition = parseInt(getComputedStyle(slide).top);
currentPosition = currentPosition - 160;
if(Math.abs(currentPosition) >= 0 && Math.abs(currentPosition) === longSlider) {
return false;
} else if (Math.abs(currentPosition) >= (longSlider - 360)) {
return false;
}
var pos = longSlider - Math.abs(currentPosition) - 480;
slide.style.top = currentPosition + 'px';
if(pos === 0) {
next.style.opacity = '0.1';
} else {
next.style.opacity = '1';
}
} else {
currentPosition = current;
currentPosition = currentPosition - 160;
if(Math.abs(currentPosition) >= 0 && Math.abs(currentPosition) === longSlider) {
return false;
} else if (Math.abs(currentPosition) >= (longSlider - 360)) {
return false;
}
var pos = longSlider - Math.abs(slider.scrollTop);
slide.style.top = currentPosition + 'px';
if(pos === 0) {
next.style.opacity = '0.1';
} else {
next.style.opacity = '1';
}
}
});
});
prev.addEventListener('click', function(event) {
event.preventDefault();
[].forEach.call(slides, function(slide, index) {
var currentPosition = parseInt(getComputedStyle(slide).top);
currentPosition = currentPosition + 160;
if (currentPosition > 0 ) {
return false;
}
slide.style.top = currentPosition + 'px';
var pos = longSlider - Math.abs(currentPosition) - 480;
if(pos === 0) {
next.style.opacity = '0.1';
} else {
next.style.opacity = '1';
}
})
})
} else {
longSlider = longSlider * 160;
slider.style.height = longSlider + 'px';
next.style.display = 'none';
prev.style.display = 'none';
}
});
