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>

如果您想尝试，这里是项目 LINK TO PROJECT

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轮播的导航控件。

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

Answer 2

如果我理解正确，您需要容器或浏览器窗口边缘的上一个/下一个按钮。

此更改的基础在于从relative删除.owl-carousel定位，因为我们需要absolute相对于外部容器的定位。

请注意，一切似乎都应该正常运行，但无法保证更改定位不会影响其他插件功能。

＆＃13;

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    }
  }
})

＆＃13;

.owl-carousel.owl-loaded {
  width: 400px;
  margin: 0 auto;
  position: static;
}
.owl-prev {
  position: absolute;
  left: 0;
  margin: 0;
  height: 80px;
  text-align: center;
  line-height: 80px;
  transform: translateY(-50%);
}
.owl-next {
  position: absolute;
  right: 0;
  margin: 0;
  height: 80px;
  text-align: center;
  line-height: 80px;
  transform: translateY(-50%);
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
  <div class="item">
    <h4>7</h4>
  </div>
  <div class="item">
    <h4>8</h4>
  </div>
  <div class="item">
    <h4>9</h4>
  </div>
  <div class="item">
    <h4>10</h4>
  </div>
  <div class="item">
    <h4>11</h4>
  </div>
  <div class="item">
    <h4>12</h4>
  </div>
</div>

＆＃13;

Answer 3

尝试一下

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  dotsContainer: '#myDots',
  navContainer: '#MyNavs'
})

以html

<div id="myDots" class="owl-dots"></div>
<div id="myNavs" class="owl-nav"></div>

如何在div

3 个答案: