My goal is to make a carousel with item title and description that looks like this
I want to display current item description under pagination. is it possible via Owl Carousel 2?
Here my code:
$(function(){
var itemClass = $('#owl-item-carousel');
itemClass.on('initialized.owl.carousel', function(e){
var idx = e.item.index;
$('.owl-item').removeClass('middle');
$('.owl-item').removeClass('left');
$('.owl-item').removeClass('right');
$('.owl-item').removeClass('left-last');
$('.owl-item').removeClass('right-last');
$('.owl-item').eq(idx).addClass('middle');
$('.owl-item').eq(idx-1).addClass('left');
$('.owl-item').eq(idx+1).addClass('right');
$('.owl-item').eq(idx-2).addClass('left-last');
$('.owl-item').eq(idx+2).addClass('right-last');
});
$('#owl-item-carousel').owlCarousel({
center: true,
items:5,
loop:true,
// margin:10,
pagination: true
});
itemClass.on('translate.owl.carousel', function(e){
idx = e.item.index;
$('.owl-item').removeClass('middle');
$('.owl-item').removeClass('left');
$('.owl-item').removeClass('right');
$('.owl-item').removeClass('left-last');
$('.owl-item').removeClass('right-last');
$('.owl-item').eq(idx).addClass('middle');
$('.owl-item').eq(idx-1).addClass('left');
$('.owl-item').eq(idx+1).addClass('right');
$('.owl-item').eq(idx-2).addClass('left-last');
$('.owl-item').eq(idx+2).addClass('right-last');
});
});
above code for only adding and remove class in item. But how can i display current item description under the pagination.
Aucun commentaire:
Enregistrer un commentaire