Owl Slider 2

index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">

<!-- Hero Slider -->
<div id="home" class="hero-slider owl-carousel owl-theme">
    <div class="single-hs-item item-bg1">
        <div class="d-table">
            <div class="d-tablecell">
                <div class="hero-text">
                    <h1>Slider Title 1</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                    <div class="slider-btn">
                    <a href="#" class="custom-btn1">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="single-hs-item item-bg2">
        <div class="d-table">
            <div class="d-tablecell">
                <div class="hero-text">
                    <h1>Slider Title 2</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                    <div class="slider-btn">
                        <a href="#" class="custom-btn1 mr-30">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="single-hs-item item-bg3">
        <div class="d-table">
            <div class="d-tablecell">
                <div class="hero-text">
                    <h1>Slider Title 3</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                    <div class="slider-btn">
                        <a href="#" class="custom-btn1 mr-30">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Hero Slider -->


<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

owl-slider-2.markdown

Owl Slider 2

A Pen by Jentan Bernardus on CodePen.

License.

script.js

// http://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$('.hero-slider').owlCarousel({
	animateOut: 'fadeOut',
	animateIn: 'fadeIn',
	items:1,
	loop:true,
	nav:true,
	// navText:['<','>'],
	dots: false,
	autoplay: true,
	autoplayTimeout: 5000,
	autoplayHoverPause: true,
	stopOnHover : true,
	lazyload: true
})

style.scss

body {
	font-family: system-ui, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
.d-table {
	width: 100%;
	height: 100%;
	display: table;
}
.d-tablecell {
	display: table-cell;
	vertical-align: middle;
}
.custom-btn1 {
	background-color: #ff3547;
	color: #fff;
	border: 1px solid #ff3547;
	display: inline-block;
	padding: 12px 30px;
	text-transform: uppercase;
	border-radius: 30px;
	text-decoration: none;
}
.custom-btn1:hover {
	background-color: transparent;
	text-decoration: none;
	color: #fff;
}
/*
Hero slider style
==========================*/
.hero-slider {
	position: relative;
}
.single-hs-item {
	padding: 60px 0;
	height: auto;
	background-size: cover;
	background-position: center center;
	position: relative;
}
.single-hs-item:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #000;
	opacity: 0.8;
}
.item-bg1 {
	background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);
}
.item-bg2 {
	background-image: url(https://source.unsplash.com/cckf4TsHAuw/1600x900);
}
.item-bg3 {
	background-image: url(https://source.unsplash.com/yyMJNPgQ-X8/1600x900);
}
.hero-text {
	padding: 0 15px;
	text-align: center;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.hero-text h1 {
	color: #fff;
	font-size: 50px;
	text-transform: capitalize;
	font-weight: 600;
	margin: 0;
}
.hero-text p {
	color: #fff;
	font-size: 17px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	line-height: 30px;
	margin-top: 20px;
	margin-bottom: 35px;
}
.hero-slider .owl-item.active h1 {
	-webkit-animation: 1s 0.3s fadeInDown both;
	animation: 1s 0.3s fadeInDown both;
}
.hero-slider .owl-item.active p {
	-webkit-animation: 1s 0.3s fadeInUp both;
	animation: 1s 0.3s fadeInUp both;
}
.hero-slider .owl-item.active .slider-btn {
	-webkit-animation: 1s 0.3s fadeInUp both;
	animation: 1s 0.3s fadeInUp both;
}
.owl-carousel .owl-nav button.owl-prev {
	background-color: #ff3547 !important;
	position: absolute;
	left: 0;
	top: 50%;
	color: #fff !important;
	font-size: 30px !important;
	margin: -40px 0 0;
	border-radius: 0;
	height: 50px;
	width: 50px;
}
.owl-carousel .owl-nav button.owl-next {
	background-color: #ff3547 !important;
	position: absolute !important;
	right: 0;
	top: 50%;
	color: #fff !important;
	font-size: 30px !important;
	margin: -40px 0 0;
	border-radius: 0;
	height: 50px;
	width: 50px;
}
.owl-theme .owl-nav {
	margin-top: 0;
}
.owl-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
}
.owl-theme .owl-dots .owl-dot span {
	width: 11px;
	height: 20px;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background: #ff3547;
}

@media only screen and (max-width: 600px) {
	.single-hs-item {
		height: 550px;
	}
	.hero-text h1 {
		font-size: 30px;
	}
	.hero-text p {
		font-size: 15px;
		margin-bottom: 25px;
	}
	.owl-carousel .owl-nav button.owl-next {
		top: auto;
		margin: 0;
		bottom: 0px;
	}
	.owl-carousel .owl-nav button.owl-prev {
		top: auto;
		margin: 0;
		bottom: 0px;
	}
	.owl-dots {
		bottom: 10px;
		left: 50px;
		right: 50px;
	}
}