owlcarousel - dots do not appear

Classes owl-carousel and owl-theme on main container are necessary for the dots to appear.

The point was the lack of the owl-theme class in your code!

Include CSS & JS resources

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

Set up your HTML

<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

Note: if you dose not include the owl-theme class in the parent Div then the Dots dose not appear to you. So it is necessary to make them visible to end users.

Call the plugin

Now call the Owl initializer function and your carousel is ready.

$(function(){
  $(".owl-carousel").owlCarousel();
});

Demo:

$(function(){
    $(".owl-carousel").owlCarousel();        
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

Ensure that you have included all of the necessary resources:

• jquery-2.1.1.min.js
• owl.carousel.min.js
• owl.carousel.min.css

Also, make sure your CSS includes the appropriate owl-page and owl-controls

Here is one example of vital CSS code:

.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.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;
}

As seen in This JSFiddle.

Note that if you remove the dots: true from the JSFiddle code (and run it) the pagination "dots" still display. However, if you remove the above CSS, the dots do not display.

Additional Answer

As this is the accepted answer I will add another potential fix as provided by @Kevin Vincendeau and brought to attention by @Amr Ibrahim in the comments.

Check to make sure your HTML is including all of the necessary classes. Such as owl-carousel and owl-theme on the main container.

I also faced the same problem while using Owl slider for the first time on my webpage. I could not see the dots navigation and I thought to myself this may be a bug and decided to do some investigation.

I figured later that there are 2 css files required to be included. One is the own-carousel.min.css and the other is owl.theme.default.min.css. After this the container div should have the owl-carousel and owl-theme class in their class list. For e.g:

<div id="slider" class="owl-carousel owl-theme">
        <img src="/dist/assets/img1.jpg" /> 
        <img src="/dist/assets/img2.jpg" /> 
        <img src="/dist/assets/img3.jpg" /> 
        <img src="/dist/assets/img4.jpg" />
</div>

Hope this helps for people who are facing this issue later.