JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
			<div class="col-lg-3 col-md-3">

			</div>
			<div class="col-lg-6 col-md-6">
				<div class="slider-container">
					<div class="next_button"><i class="fa fa-angle-right fa-3x"></i></div>
					<div class="prev_button"><i class="fa fa-angle-left fa-3x"></i></div>
					<div class="carousel">
						<div class="slide_item">
							<a class="fancybox" data-fancybox-group="group" href="images/1.png"><img src="images/1.png" alt="alt" /></a>
						</div>
						<div class="slide_item">
							<a class="fancybox" data-fancybox-group="group" href="images/2.png"><img src="images/2.png" alt="alt" /></a>
						</div>
						<div class="slide_item">
							<a class="fancybox" data-fancybox-group="group" href="images/3.png"><img src="images/3.png" alt="alt" /></a>
							</div>
						<div class="slide_item">
							<a class="fancybox" data-fancybox-group="group" href="images/1.png"><img src="images/1.png" alt="alt" /></a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-md-3">

			</div>
		</div>

CSS

.slider-container {
	display: block;
	width: 100%;
	border: #020202 1em solid;
	text-align: center;
	border-radius: 1em;
}
.slider-container img {
	width: 100%;
}
.next_button,
.prev_button {
	position: absolute;
	top: 45%;
	color: white;
	z-index: 10;
	background-color: rgba(2,2,2,.5);
	padding: 0 1em;
	border-radius: 1em;
	cursor: pointer;
}

.next_button {
	right: 10%;
}
.prev_button {
	left: 10%;
}

JavaScript

//Каруселька
	//Документация: http://owlgraphic.com/owlcarousel/
	var owl = $(".carousel");
	owl.owlCarousel({
		items : 1
	});
	owl.on("mousewheel", ".owl-wrapper", function (e) {
		if (e.deltaY > 0) {
			owl.trigger("owl.prev");
		} else {
			owl.trigger("owl.next");
		}
		e.preventDefault();
	});
	$(".next_button").click(function(){
		owl.trigger("owl.next");
	});
	$(".prev_button").click(function(){
		owl.trigger("owl.prev");
	});