My slick carousel with vertical scroll is causing issues as it scrolls the entire page. I am specifically looking to have it scroll within a particular div, such as the product section div. Any suggestions on how to achieve this?
Html Code:
<section class="slide-wrapper">
<!-- Need to scroll only inside this div -->
</section>
Script:
var $slider = $("#slider");
$slider.on('init', function () {
mouseWheel($slider);
}).slick({
dots: true,
vertical: true,
infinite: false
});
function mouseWheel($slider) {
$(window).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('slickPrev');
} else {
$slider.slick('slickNext');
}
}