Owl Carousel is not working. My elements just stack up one another

Question

My owl carousel is not working. When I add in the picture all it does is add another picture down below the first one. There's also no slider dots. What is the problem here?

Could it be I missed a stylesheet or js to use?

I already checked my owl carousel JavaScript and stylesheet and all of them are in the appropriate directories.

$('.slider1').owlCarousel({
  loop: true,
  nav: false,
  dots: true,
  margin: 128,
  center: true,
  items: 1,
  mouseDrag: false,
  animateOut: 'fadeOutRight',
  animateIn: 'fadeInLeft',
  autoplay: true
});

.slider1 {
  display: block;
  position: relative;
  top: 300px;
  width: 800px;
  right: 90px;
  z-index: 1;
}

.slider-content {
  overflow: hidden;
  height: 500px;
}

.slider-content .slider-item {
  border-radius: 50px;
  margin-bottom: 42px;
  position: relative;
  height: 100%;
  width: 100%;
  opacity: 1;
}

.slider-content .slider-item p {
  font-size: 0.938rem;
  margin-bottom: 0;
}

.slider-content .slider-item:after {
  position: absolute;
  content: "";
  top: 100%;
  right: 34px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 17px solid #eef6f9;
}

.slider1 .owl-dots {
  display: flex;
  display: -webkit-box;
  display: -ms-flex;
  display: -ms-flexbox;
  position: absolute;
  bottom: 37px;
  left: 0;
}

.slider1 .owl-dots .owl-dot {
  display: inline-flex;
  display: -webkit-inline-box;
  display: ms-inline-flex;
  display: -ms-inline-flexbox;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 7px;
  background: #eef6f9;
}

.slider1 .owl-dots .owl-dot.active {
  background: #eb2b63;
}

<div class="col-lg-6">
  <div class="slider1 owl-carousel">
    <div class="slider-content">
      <div class="slider-item set-bg" data-setbg="https://via.placeholder.com/600x400">
      </div>
    </div>

    <div class="slider-content">
      <div class="slider-item set-bg" data-setbg="https://via.placeholder.com/600x400/ff0000">
      </div>
    </div>
  </div>
</div>