jeudi 30 juin 2016

Owl Carousel 2: is there any way to display current item excerpt or item details?


My goal is to make a carousel with item title and description that looks like this

enter image description here

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