JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/jquery/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
<script src="https://raw.githubusercontent.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js"></script>
<div id="slider">
	<ul>
		<li>slide 1</li>
		<li>slide 2</li>
		<li>slide 3</li>
	</ul>
</div>

CSS

.bx-viewport li {height: 50px;}

JavaScript

slider = $('#slider ul').bxSlider();

slider.on('mousewheel', function(event, delta, deltaX, deltaY) {
	if (delta > 0) {slider.goToPrevSlide();}
	if (deltaY < 0){slider.goToNextSlide();}
	event.stopPropagation();
	event.preventDefault();
});