How to get basic information with Owl Carousel 2
I am using the Owl Carousel 2 pencil jwery slider and I am trying to get some basic information, specifically I want to display the current slide number in paragraph tags above the slider with the "currentSlide" class.
Here's my markup:
<p class="currentSlide"></p>
<div id="slider" class="owl-carousel">
<div class="item"><h3>Slider 1</h3></div>
<div class="item"><h3>Slider 2</h3></div>
<div class="item"><h3>Slider 3</h3></div>
<div class="item"><h3>Slider 4</h3></div>
<div class="item"><h3>Slider 5</h3></div>
<div class="item"><h3>Slider 6</h3></div>
</div>
And here is my javascript:
<script type="text/javascript">
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 3,
center : true,
loop : true,
//info: ??Function??
});
});
</script>
The documentation says to add the "info" option:
about
Type: Function
Default: false
Callback to retrieve basic information (current element / pages / width). The Info function parameter the second is the Owl DOM reference.
I need help with this "information" as I am a jQuery newbie.
Thank you in advance
source to share
The event object passed to the callbacks contains all the information you need: (see: Documents / Events / Data)
So you just need to add a callback for some event ... translated.owl.carousel
might work best in your situation.
var owl = $('.owl-carousel');
owl.owlCarousel();
owl.on('translated.owl.carousel', function(event) {
$('.currentSlide').text( event.item.index );
});
... and you might want to add a callback initialized.owl.carousel
.
source to share
The solution is taken here: http://www.jq22.com/demo/OwlCarousel2/demos/info.html
use "info: getInfo", the following function lists all the options, so just select one of them:
function getInfo(i){
var owlInfo = i,prop,value,name;
for(prop in owlInfo){
if(owlInfo.hasOwnProperty(prop)){
value = owlInfo[prop];
name = prop;
$('.'+name).text(value);
}
}
}
source to share