html - Owl Carousel 2 分页点未显示

Question

我遇到了问题。导航组件 owl-nav 和 owl-dots 不再包含在 owl-controls 中。

<div class="owl-nav disabled">
  <div class="owl-prev">prev</div>
  <div class="owl-next">next</div>
</div>
<div class="owl-dots disabled">
  <div class="owl-dot active"><span></span></div>
  <div class="owl-dot"><span></span></div>
</div>

演示展示:

<div class="owl-controls">
  <div class="owl-nav disabled">
    <div class="owl-prev">prev</div>
    <div class="owl-next">next</div>
  </div>
  <div class="owl-dots disabled">
    <div class="owl-dot active"><span></span></div>
    <div class="owl-dot"><span></span></div>
  </div>
</div>

这破坏了 owl-theme 中的默认 css 选择。

谁能帮我解决这个问题？ 提前致谢。

Answer 1

有同样的问题，使用了一些我自己的 CSS 样式:

 .owl-dots {
    text-align: center;
    position: fixed;
    bottom: 5px;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.owl-dot {
    border-radius: 50px;
    height: 10px;
    width: 10px;
    display: inline-block;
    background: rgba(127,127,127, 0.5);
    margin-left: 5px;
    margin-right: 5px;
}

.owl-dot.active {
    background: rgba(127,127,127, 1);
}

如果您不想重叠点，只需使用:

.owl-dots {
    text-align: center;       
}