JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="gallery">
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
    <div>
        <img src="http://placehold.it/700x500" />
    </div>
</div>

CSS

.slick-slide {
    padding:0 8px;
}

JavaScript

$('.gallery').slick({

})
    .on("mousewheel", function (event) {
        event.preventDefault();
    if (event.deltaX > 0 || event.deltaY < 0) {
        $(this).slickNext();
    } else if (event.deltaX < 0 || event.deltaY > 0) {
        $(this).slickPrev();
    }
});