Как выйти из скользкого слайдера и перейти к следующему разделу?

Question

Я разрабатываю сайт, на котором я хочу менять слайды с помощью прокрутки, и я сделал это с помощью скользящего слайдера, но когда слайды заканчиваются, он не переходит к следующему разделу прокрутки.Мне нужно перетащить полосу прокрутки вручную, чтобы перейти к следующему разделу.Как сделать все это с помощью мыши?

Вот мой Html:

<div class="banner banner-full banner-full-slider">
    <div class="banner-slides d-flex align-items-center">
        <div class="banner-slides-left d-flex w-50 justify-content-center">

        </div>
        <div class="banner-slides-right d-flex w-50 justify-content-center">
            <img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
        </div>
    </div>
    <div class="banner-slides">
        <div class="banner-slides-left d-flex w-50 justify-content-center">
            <img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
        </div>
        <div class="banner-slides-right d-flex w-50 justify-content-center">

        </div>
    </div>
    <div class="banner-slides d-flex align-items-center">
        <div class="banner-slides-left d-flex w-50 justify-content-center">

        </div>
        <div class="banner-slides-right d-flex w-50 justify-content-center">
            <img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
        </div>
    </div>
</div>
<main class="site-content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil incidunt sapiente cumque? Obcaecati, maxime consequuntur illum quia a necessitatibus mollitia rerum harum neque impedit nostrum tenetur ad perferendis. Dolores rerum repellendus excepturi omnis ex deserunt quidem saepe, assumenda doloribus recusandae minima labore molestiae in beatae adipisci! Praesentium laborum beatae fuga.
</main>

Вот JS:

$(document).ready(function () {
var $slider = $(".banner-full-slider");
$slider.
on('init', function () {
    mouseWheel($slider);
}).
slick({
    dots: false,
    infinite: false,
    fade: true,
    cssEase: 'linear',
    arrows: 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');
    }
}

});