How to make custom dots in owl carousel?

Question

I have implemented custom prev next buttons(i ommit css styles for prev next buttons), but havent dots. Who know what is mistake I did?

// owl.carousel.css

.owl-controls {
    text-align: center;
}
.owl-controls .owl-dot {
    display: inline-block;
}
.owl-controls .owl-dot span {
    background-color: #333;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    width: 12px;
    filter: Alpha(Opacity=500);/*IE7 fix*/
    opacity: 0.5;
}
.owl-controls .owl-dot.active span, .owl-controls .owl-dot:hover span {
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

<script>
		$(document).ready(function(){
		  	$('.owl-carousel').owlCarousel({
		    loop:true,
		    margin:10,
		    nav:true,
		    navText: ["<img src='prevArrow.png'>","<img src='nextArrow.png'>"],
		    responsive:{
	        0:{
	            items:1
	        },
	        600:{
	            items:1
	        },
	        1000:{
	            items:1
	        }
		    }
			})
		});
	</script>

<div class="owl-carousel">
	  <img src="lylka.png" alt="">
	  <img src="lylka.png" alt="">
	  <img src="lylka.png" alt="">
	  <img src="lylka.png" alt="">
	  <img src="lylka.png" alt="">
</div>

Answer 1

Use option dotsContainer, but sometimes it works oddly.

For example

<div id='carousel' class='owl-carousel'> 
  <div class='item'></div> 
  <div class='item'></div> 
  <div class='item'></div> 
</div>
<ul id='carousel-custom-dots' class='owl-dots'> 
  <li class='owl-dot'><!-- Anything in here --></li> 
  <li class='owl-dot'></li> 
  <li class='owl-dot'></li> 
</ul>

Next include this inside of your options object.

owl.owlCarousel({
  dotsContainer: '#carousel-custom-dots'
});

The following tells Owl Carousel 2 to go to a slide based on the index of the dot that was clicked.

$('.owl-dot').click(function () {
  owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});

That should be all you need to get custom dots up and going with Owl Carousel 2.

via http://derickruiz.com/owl-carousel-custom-dots

Answer 2

You can solve the problem in this way:

HTML code

<section id="slider" class="content-slider row">
<div class="col-8 owl-carousel slide-cnt">
    <div class="slide"><h3>TITOLO</h3></div>
    <div class="slide"><h3>TITOLO</h3></div>
    <div class="slide"><h3>TITOLO</h3></div>
</div>
<div class="col-4 dots-cnt">
    <ul class="elenco-articoli">
        <li>Titolo</li>
        <li>Titolo</li>
        <li>Titolo</li>
    </ul>
</div>

JS code:

var owl;
owl = jQuery('.owl-carousel').owlCarousel({
    loop:true,
    autoplay: true,
    autoplaySpeed: 600,
    nav:true,
    navText: ["<",">"],
    dots:false,
    items:1
});
jQuery('.elenco-articoli').on('click', 'li', function(e) {
    owl.trigger('to.owl.carousel', [jQuery(this).index(), 300]);
});

This work for me.

If you want you can elaborate on: https://codepen.io/vbeetlejuice/pen/dRaero