Owl Carousel Slider Arrows定位问题

Question

我有问题（我认为我的代码结构不正确）将我的猫头鹰旋转木马箭头正好放在我的.container类的左侧和右侧。我不知道如何构建它。现在它正在工作，因为我把它们作为绝对位置但是当我为小型设备调整大小时，我的左右箭头看起来很破碎。我想将它们放在我的容器中，对于桌面设备是1200像素，我想将它们放在容器的左侧和右侧。在这个示例中，我的左右控制箭头丢失，我没有任何线索为什么。我在这里检查了很多类似的问题，并且所有人都说我必须添加我的猫头鹰自定义左右控制器，但是当我通过navText执行时：[] ....这个例子上的屏幕上没有显示。 这是我到现在为止所拥有的。有什么想法吗？

// 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>'
  ]
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.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">
<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>

JSFiddle