Jquery - 猫头鹰轮播点问题

Question

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

Hey guys I'm creating a slider using owl carousel. I need dots. So I gave "dots:true" but I can't see the dots. Can you guys know why? Please help me. Thanks:)

Answer 1

The CSS might be missing for those dots if you are using minified file. Try following CSS:

  .owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
  }

Demo: http://jsfiddle.net/lotusgodkk/s10bgckL/7044/

Answer 2

Dots and navigation only appear when you use the theme. You need to import the styles and add the class to your element:

<!-- Owl Stylesheets -->
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">

<div class="loop 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>