JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll">
		<ul>
			<li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
			<li style="background-image: url('http://i.imgur.com/qjmCv5g.jpg')"></li>
            <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
			<li style="background-image: url('http://i.imgur.com/qjmCv5g.jpg')"></li>
			<li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
		</ul>
	</div>

CSS

.scroll {
  position: relative;
  overflow: hidden;
}

.scroll * {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.slides-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  list-style-type: none;
}

.slide {
  position: relative;
  width: 100%;
  height: 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* ------------ */

.scroll {
  width: 500px;
  height: 300px;
}

JavaScript

$.fn.scroll = function () {
    var $this = $(this);
    var $list = $(this).find('ul');
    var $lis = $list.find('li');
    var count = $lis.length;
    var direction,
    currentSlidePosition;

    $this.addClass('scroll');
    $list.addClass('slides-list');
    $lis.addClass('slide');
    $lis.filter(':first').addClass('current');
    $lis.filter(':not(:first)').addClass('past');

    var scrollHeight = $lis.eq(0).height();

    function gotoSlide(direction) {
        currentSlidePosition = $lis.filter('.current').index();

        if ((direction === 1 && currentSlidePosition === 0) || (direction === -1 && currentSlidePosition === count - 1)) {
            return;
        }
		
		$lis.removeClass('current');
		$lis.eq(currentSlidePosition - direction).removeClass('past prev').addClass('current');
		$lis.filter('.current').prevAll().addClass('prev');
		$lis.filter('.current').nextAll().addClass('past');
		console.log($list.scrollTop())
		$list.animate({
			scrollTop: (direction === -1) ? $list.scrollTop()+scrollHeight : $list.scrollTop()-scrollHeight
		}, {
			duration: 600
		});
    }

    $this.on('mouseenter', function () {
        var $this = $(this);

        $this.bind('mousewheel', function (e) {
            e.preventDefault();
            if ($list.is(':animated')) {
              
                return;
            }

            if (e.originalEvent.wheelDelta > 0) {
				direction = 1; //up
            } else {			    
                direction = -1; //down
            }
			
			gotoSlide(direction);
        });
    });
};

$(document).ready(function () {
    $('#scroll').scroll();
});