Owl Carousel 2 - create custom pager / dots

I'm looking for a way to create, besides the custom navigation, a custom pager / dots.

HTML

<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.theme.default.css">
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.carousel.css">
<a class="prev">prev</a>
<a class="next">next</a>

<div class="page"><p>
1
</p>
<p>
2
</p>
<p>
3
</p></div>

<div class="owl-carousel">
    <div class="item">
        <img src="http://malsup.github.io/images/p2.jpg" title="Title 1" alt="Alt 1" />
    </div>
    <div class="item">
        <img src="http://malsup.github.io/images/p3.jpg" title="Title 2" alt="Alt 2" />
    </div>
    <div class="item">
        <img src="http://malsup.github.io/images/p4.jpg" title="Title 3" alt="Alt 3" />
    </div>
</div>

CSS

.owl-carousel .owl-item {
    background:#CCC;
}
.owl-carousel .owl-item img {
    display:block;
    widht:100%;
    height:400px;
}

JavaScript

$('.owl-carousel').owlCarousel({
    loop: true,
    dots: true,
    items: 1,
});

owl = $('.owl-carousel').owlCarousel();

$(".prev").click(function () {
    owl.trigger('prev.owl.carousel');
});
$(".next").click(function () {
    owl.trigger('next.owl.carousel');
});