Owl Carousel 2 pagination dots were not diplayed

问题:

I am experiencing issue. The navigation components owl-nav and owl-dots are no longer wrapped with 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>

Demos show:

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

This is breaking the default css selections within owl-theme.

Can any one help me to solve this issue? Thanks in advance.

回答1:

Had the same problem, used some CSS-Styling my own:

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

If you don't want to overlaps the dots just use:

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

回答2:

I had same issue, Add more slides and dots will appear.