web-dev-qa-db-ja.com

Owl Carousel 2のアイテムにクラスを追加するにはどうすればよいですか？

私の目標は、次のようなカルーセルを作成することです。

Carousel

何を見ているのかわからない場合は、5つの画像/アイテムがありますが、中央の1つだけがフルサイズで表示されます。中央の隣の画像は小さく、外側の画像はさらに小さくなっています。

私はフクロウカルーセルの最初のバージョンでこれを達成しましたが、ループをサポートしていないため、このデザインはばかげています（側面の画像に到達できません...）。

これが私がそれをした方法です：

var owl = $("#owl-demo");

owl.owlCarousel({
pagination: false,
lazyLoad: true,
itemsCustom: [
  [0, 3],
  [900, 5],
  [1400, 7],
],
afterAction: function(el){

.$owlItems
   .removeClass('active') //what I call the center class
   .removeClass('passive') //what I call the next-to-center class

   this
   .$owlItems

    .eq(this.currentItem + 2) //+ 2 is the center with 5 items
    .addClass('active')

    this
    .$owlItems

    .eq(this.currentItem + 1)
    .addClass('passive')

    this
    .$owlItems

    .eq(this.currentItem + 3)
    .addClass('passive')
  }

5つの項目のコードを示しているだけですが、3と7でも機能させるためにいくつかのif句を使用しました。 activeクラスは、width: 100%とpassive1つのwidth: 80%で構成されています。

フクロウカルーセル2で同じ結果を得る方法を知っている人はいますか？ _itemsの代わりに$owlItemsを使用していますが、それが正しいかどうかわかりません。 afterActionはなく、イベント/コールバックはv2で正常に機能していないようです。

jquerycarouselowl-carouselowl-carousel-2
7
user4325086

あなたはこのようにそれを行うことができます：

$(function(){
    $('.loop').owlCarousel({
        center: true,
        items:5,
        loop:true,
        margin:10
    });

    $('.loop').on('translate.owl.carousel', function(e){
        idx = e.item.index;
        $('.owl-item.big').removeClass('big');
        $('.owl-item.medium').removeClass('medium');
        $('.owl-item').eq(idx).addClass('big');
        $('.owl-item').eq(idx-1).addClass('medium');
        $('.owl-item').eq(idx+1).addClass('medium');
    });
});

お好みのイベントを聞く

ここで利用可能なイベントのリスト

デモでは、クラスbigをメインアイテムに追加し、クラスmedium前と次のものに。そこから、好きなcssプロパティで遊ぶことができます。

ライブデモ

注意：

プラグインクラスで遊ぶこともできます、.activeおよび.center（または、ここに表示されているように、独自に定義することもできます： カスタムクラス

11
Robin Leboeuf

これをcssおよびjsファイルに追加します。

.owl-carousel.owl-drag .owl-item.center .item {
    background: rgb(25, 0, 255) ;
    transform: scale(1.1)
  }


$(document).ready(function () {

$(".owl-carousel").owlCarousel({
    center: true,
    dots: false,
    loop:true,
    responsive: {
        1900: {
            items: 7
        },
        1440: {
            items: 5
        },
        760: {
            items: 3
        },
        0: {
            items: 1
        }
    }
});

}）;

0
Jaber