OwlCarousel2

HTML
-----
<section class="slider-area">
        <div class="slide-carousel owl-carousel">
            <div class="single-slide-item slide-img-01"></div>
            <div class="single-slide-item slide-img-02"></div>
            <div class="single-slide-item slide-img-03"></div>
            <div class="single-slide-item slide-img-04"></div>
        </div>
</section>

CSS
---
.slide-img-01{background-image: url(../images/Business01.jpg);}
.slide-img-02{background-image: url(../images/Business02.jpg);}
.slide-img-03{background-image: url(../images/Business03.jpg);}
.slide-img-04{background-image: url(../images/Business04.jpg);}


.single-slide-item {
    background-size: cover;
    background-position: center;
    height: 600px;
    width: 100%;
}

.slide-carousel.owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 70px;
    color: #fff;
}

.slide-carousel.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    left: auto!important;
    right: -1180px;
}

.slide-carousel.owl-carousel .owl-nav i.fas {
    font-size: 30px;
    width: 60px;
    height: 60px;
    background: #333;
    line-height: 56px;
    text-align: center;
    border-radius: 50%;
    border: 3px solid #fff;
    opacity: .2;
    transition: .3s;
}

.slide-carousel.owl-carousel .owl-nav:hover i.fas {
    opacity: 1;
}


.slide-carousel .owl-dots {
    position: absolute;
    bottom: 20px;
    width: 15px;
    height: 15px;
    background: #333;
    left: 50%;
    border-radius: 50%;
    display: inline-block;
    padding: 0px;
}

JS
-------
$(document).ready(function(){
          $(".owl-carousel").owlCarousel({
            items: 1,
            loop: true,
            dots: true,
            nav: true,
            navText: ['<i class="fas fa-angle-left"></i>','<i class="fas fa-angle-right"></i>'],
            autoplay: false,
          });
        });