Implementing mouse scroll in slick.js

by Michael Mandarino

HTML

<script src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css">
<div class='container'>
    <h4>With Mouse Scroll</h4>
    <div class='slider-item'>
        <div>
            <h3>1</h3>
        </div>
        <div>
            <h3>2</h3>
        </div>
        <div>
            <h3>3</h3>
        </div>
        <div>
            <h3>4</h3>
        </div>
        <div>
            <h3>5</h3>
        </div>
        <div>
            <h3>6</h3>
        </div>
                <div>
            <h3>7</h3>
        </div>
        <div>
            <h3>8</h3>
        </div>
        <div>
            <h3>9</h3>
        </div>
        <div>
            <h3>10</h3>
        </div>
        <div>
            <h3>11</h3>
        </div>
        <div>
            <h3>12</h3>
        </div>
    </div>
</div>

CSS

body {
    background: #419be0;
}

.container {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    color: #333;
    height: 10000px;

}

.slick-slide {
    text-align: center;
    color: #419be0;
    background: white;
    margin: 10px;
}

h4 {
    text-align: center;
}

JavaScript

const slider = $(".slider-item");
slider
    .slick({
        slidesToShow: 5,
        slidesToScroll: 1,
        dots: false,
        centerMode: true,
        focusOnSelect: true,
        dots: true,
        vertical: true,
        verticalSwiping: true

    });

slider.on('wheel', (function(e) {
    e.preventDefault();

    if (e.originalEvent.deltaY < 0) {
        $(this).slick('slickPrev');
    } else {
        $(this).slick('slickNext');
    }
}));