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

Answer 2

您还必须添加猫头鹰主题文件以获取分页点。

$(document).ready(function(){
  $('#demoCarousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots: true // if you don't want dots, change to false
  });
});

#demoCarousel .item {
  height: 10rem;
  background: #4DC7A0;
  padding: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme" id="demoCarousel">
    <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>

Answer 3

我遇到了同样的问题，添加更多的幻灯片和点将出现。

Owl Carousel 2分页点没有显示

3 个答案: