How to Make Custom Dots in Owl Carousel

How do you make custom Owl Carousel dots clickable?

This works.
To center the custom dots just do:

.owl-dots {
text-align: center
}

$('.owl-carousel').owlCarousel({
loop: false,
margin: 10,
nav: false,
dots: false,
dotsData:true,
dotsContainer: '.owl-dots',
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
<div class="item">
<h4><img src="https://via.placeholder.com/150"></h4>
</div>
</div>

<div class="owl-dots">
<button role="button" class="owl-dot active"><span>1</span></button>
<button role="button" class="owl-dot"><span>2</span></button>
<button role="button" class="owl-dot"><span>3</span></button>
<button role="button" class="owl-dot"><span>4</span></button>
</div>

Owl-Carousel2 - set dotsData

Change the following code like this:

$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotData: true,
dotsData: true
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});

Add your dots data in your owl-item:

  <div class="item" data-dot="<button role='button' class='owl-dot'></button>">
<!-- Your Image -->
</div>

How to implement onChange event/ callbacks / custom dots in Owl Carousel (2) for angular 2/7

Every new function created by function statement, defined its own this value based on how the function was called. so using arrow function will refer to current object

sliderOptions = {
items: 1,
dots: true,
nav: false,
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
onChange: () => {
console.log("change");
this.changeCustomDots();
}
};


Related Topics



Leave a reply



Submit