猫头鹰旋转2分页点不显示 [英] Owl Carousel 2 pagination dots were not diplayed

问题描述

我遇到问题。导航组件owl-nav和owl-dots不再用owl控件包装。

 < div class = -nav disabled> 
< div class =owl-prev>上一页< / div> 
< div class =owl-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>上一页< / div> 
< div class =owl-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选择。

任何人能帮我解决这个问题吗？同样的问题，使用一些CSS-Styling我自己的：

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

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.

解决方案

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分页点不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！