1

私の目標は、次のようなアイテムのタイトルと説明を含むカルーセルを作成することです。

ここに画像の説明を入力

ページネーションの下に現在の商品説明を表示したい。Owl Carousel 2 経由で可能ですか?

これが私のコードです：

$(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');
    });
});

上記のコードは、アイテムのクラスを追加および削除するためだけのものです。 しかし、ページネーションの下に現在のアイテムの説明を表示するにはどうすればよいですか?

4

1 に答える 1

0

イベントにタイトルを渡して、関数にそのタイトルを更新させることができます。したがって、たとえば次のことができます。

マークアップは次のようになります。

<div class="owl-item" data-title="Title-01" data-action="updateTitle"></div>

そして、私のJSの外観は次のようになります

var $item = $('[data-action=updateTitle]');
$item.bind("click", function(){
     let $this = $(this),
         $dataTitle = $this.data('title'),
         $title = $("#owl-title");

     $title.text($dataTitle)
})
于 2016-06-24T14:56:51.433 に答える