How to make custom dots in owl carousel? - html

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

Answer 3

CSS:
.owl-dots button i {
position: absolute;
z-index: 9999;
width: 100%;
height: 100%;
}
HTML:
<div class="testimonial_slider owl-carousel owl-theme">
<div class="item" data-dot="<button><i></i><img src='images/testimonial-1.jpg' alt='' class='img-fluid' /></button>">
<div class="testimonial-dec">
<h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
</div>
<div class="testimonial-name mt-4">
<p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span> - COO, AMERIMAR ENTERPRISES, INC.</p>
</div>
</div>
</div>
jQuery:
$('.testimonial_slider').owlCarousel({
loop:false,
margin:32,
nav:false,
dots: true,
items:1,
mouseDrag: false,
dotsData: true,
});
enter image preview