JSFiddle - React, Tailwind, and code Playground

by JSDavi

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
	<div class="container">
 
  <div id="slider" class="owl-carousel owl-theme">
		<div class="item">
			<div>
				<div class="owl-text-slider-1">
					<h2 class="owl-title">Text 1</h2>
					<p class="owl-caption">Text 2</p>
				</div>
			</div>
			<img src="https://via.placeholder.com/1920x1080" title="Image" alt="Image">
		</div>
		<div class="item">
			<div>
				<div class="owl-text-slider-1">
					<h2 class="owl-title">Text 1</h2>
					<p class="owl-caption">Text 2</p>
				</div>
			</div>
			<img src="https://via.placeholder.com/1920x1080">
		</div>
		<div class="item">
			<div>
				<div class="owl-text-slider-1">
					<h2 class="owl-title">Text 1</h2>
					<p class="owl-caption">Text 2</p>
				</div>
			</div>
			<img src="https://via.placeholder.com/1920x1080">
		</div>
		<div class="item">
			<div>
				<div class="owl-text-slider-1">
					<h2 class="owl-title">Text 1</h2>
					<p class="owl-caption">Text 2</p>
				</div>
			</div>
			<img src="https://via.placeholder.com/1920x1080">
		</div>
		<div class="item">
			<div>
				<div class="owl-text-slider-1">
					<h2 class="owl-title">Text 1</h2>
					<p class="owl-caption">Text 2</p>
				</div>
			</div>
			<img src="https://via.placeholder.com/1920x1080">
		</div>
		<div class="item">
			<div>
				<div class="owl-text-slider-1">
					<h2 class="owl-title">Text 1</h2>
					<p class="owl-caption">Text 2</p>
				</div>
			</div>
			<img src="https://via.placeholder.com/1920x1080">
		</div>
	</div><!-- #slider -->
    </div>

CSS

.container {
  width: 1200px;
  margin: 0 auto;
}

#slider {
    position: relative;
}

#slider .item img{
    display: block;
    width: 100%;
    height: auto;
}


.owl-nav {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}


.owl-dots {
    position: absolute;
    bottom: 35px;
    z-index: 11;
    left: 50%;
    transform: translateX(-50%);
}

.item div {
    position: absolute;
    z-index: 11;
    top: 60%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    margin: 0 auto;
    width: 50%;
}

.owl-title,
.owl-caption {
    font-family: "Arial", sans-serif;
    font-size: 70px;
    color: #fff;
    text-transform: uppercase;
}

.owl-text-slider-1 .owl-title {
    margin-bottom: 10px;
}

.owl-text-slider-1 .owl-title:before {
    content: "";
    width: 52px;
    display: block;
    position: absolute;
    top: -4px;
    left: 4px;
}

.owl-caption {
   font-size: 51px;
   text-align: left;
}

.item .arrow-down {
    top: 85%;
    width: 38px;
    height: 22px;
}

.prev_owl,
.next_owl {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
}

.prev_owl {
    top: 50%;
    right: 18%;
    transform: rotate(180deg);
    text-align: center;
}

.next_owl {
    top: 50%;
    left: 18%;
}

.carousel-caption {
    position: absolute;
    z-index: 1;
    display:table;
    width:100%;
    height:100%;
}

.carousel-caption .slider-content-text {
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}

.trickcenter {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.carousel-control:hover, 
.carousel-control:focus {
    opacity: 1;
}

JavaScript

// Owl Carousel Slider
	$("#slider").owlCarousel({
		nav: true, // Show next and prev buttons
		dots: true,
		slideSpeed: 300,
		paginationSpeed : 400,
		items: 1, 
		itemsDesktop: false,
		itemsDesktopSmall: false,
		itemsTablet: false,
		itemsMobile: false,
		navText : [
		'<a href="javascript:;" class="owl_next prev_owl"><img src="https://imgur.com/zTRFaaX" alt="left"></a>',
		'<a href="javascript:;" class="owl_prev next_owl"><img src="https://imgur.com/zTRFaaX" alt="left"></a>'
		]
	});