如何在div外获得猫头鹰轮播导航

Question

我试图为我的网站制作应用程序轮播，但我被困在这部分我不明白如何让导航按钮粘在两侧。我正在使用猫头鹰轮播导航按钮

这是现在下一个和上一个按钮不会从 div 中消失的样子

我多么想要

代码

<section id="works">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-12">
            <div class="works-slider animated fadeInUp owl-carousel owl-theme owl-loaded">
               <div class="owl-stage-outer">
                  <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0.25s; width: 2102.4px;">
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a class="owl-prev"><img src="img/app-pics/1.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a class="owl-prev"><img src="img/app-pics/5.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/9.png"><img src="img/app-pics/9.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/8.png"><img src="img/app-pics/8.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/2.png"><img src="img/app-pics/2.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/6.png"><img src="img/app-pics/6.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/7.png"><img src="img/app-pics/7.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/4.png"><img src="img/app-pics/4.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/3.png"><img src="img/app-pics/3.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/10.png"><img src="img/app-pics/10.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/11.png"><img src="img/app-pics/11.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/12.png"><img src="img/app-pics/12.png" alt=""></a>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="owl-controls">
                  <div class="owl-nav">
                     <div class="owl-prev" style="">prev</div>
                     <div class="owl-next" style="">next</div>
                  </div>
                  <div class="owl-dots" style="display: none;"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

如果您想尝试 链接到项目，这里是项目

Answer 1

您可以绝对/使用 CSS 将导航定位到左侧和右侧（或您想要的任何位置） - 您不需要触摸 html。

.owl-nav div {
  position: fixed;
  top: 50%
  /*
  height: 20px;
  width: 20px;
  */
}

.owl-prev {
  left: 5px;
  /**
   * margin-top: -10px;
   * negative margin-top half the height so its centered.
   */
}

.owl-next {
  right: 5px;
  /**
   * margin-top: -10px;
   * negative margin-top half the height so its centered.
   */
}

编辑：添加一些 html（在 #recent_work 之外）并将它们绑定为 owl carousel 的导航控件。

HTML（任何你想要的）：

<div id="next-slide" class="my-controls-btns">
  <i class="fa fa-chevron-right"></i>
</div>
<div id="prev-slide" class="my-controls-btns">
  <i class="fa fa-chevron-left"></i>
</div>

JS：

document.getElementById('next-slide').addEventListener('click', function(){
   $('.works-slider').trigger('next.owl.carousel');
});

document.getElementById('prev-slide').addEventListener('click', function(){
   $('.works-slider').trigger('prev.owl.carousel');
});

现在您可以将它们放置在轮播外：

.my-controls-btns {
  position: absolute;
  top: 50%;
  color: black;
  height: 20px;
  width: 20px;
}

#prev-slide {
  left: 5px;
  margin-top: -10px;
}

#next-slide {
  right: 5px;
  margin-top: -10px;
}