如何在猫头鹰转盘上放箭？

Question

是否可以通过js或html + css将导航箭头放到猫头鹰轮播中？它工作正常，但是我认为拖动图像进行导航并不是很好，因此，箭头会为我解决此问题。我通过互联网找到了一些答案，但是这些答案都不适合我，当我在js上修改某些内容时，轮播会停止工作。

 <div class="owl-carousel owl-theme" >
<div class="item itemmb">

    <img class="img-fluid img-card" src="Imagens/dent.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="p text-center my-3 sb-m saiba-mais"> Test </h4>

 </div>



  <div class="item">

    <img class="img-fluid img-card" src="Imagens/ped.jpg">
     <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
 </div>
                 <div class="item">

    <img class="img-fluid img-card" src="Imagens/ped.jpg">
     <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
 </div>

     <script type="text/javascript">
   $('.owl-carousel').owlCarousel({
loop:true,
navigation: true,
margin:20,
nav:true,
responsive:

       {
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:5
    }
}

}）

   </script>

Answer 1

这是因为响应式初始化。如果您没有足够的items，就不会有任何箭头或圆点消失

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 20,
  nav: true,
  responsive:

  {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
  <div class=" itemmb">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="p text-center my-3 sb-m saiba-mais"> Test </h4>

  </div>



  <div class="">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
  </div>
  <div class="">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
  </div>

</div>