web-dev-qa-db-ja.com

アクティブなアイテムは、フクロウのカルーセルの真ん中にある必要があります

フクロウのカルーセルに問題があります。すべて正常に動作しますが、アクティブなアイテムはページの真ん中のアイテムではなく最初のアイテムです（色付きがアクティブなアイテムです）。これは次のスクリーンショットで確認できます。

Screenshot of owl-caousel

真ん中のアイテムを常にアクティブなアイテムにしたいです。

私のJQueryコード：

jQuery(".owl-carousel").owlCarousel({
    items:3,      
    loop:true,
    nav:true,
    responsive:{
        0:{
            items:1,
            stagePadding: 450
        },
        600:{
            items:1,
            stagePadding: 450
        },
        1000:{
            items:1,
            stagePadding: 450
        }
    }
});

私はこのようなものを見つけましたが、それは機能しません：

jQuery(".owl-carousel").owlCarousel({
    items:3,      
    loop:true,
    nav:true,

// THIS IS THE NEW PART
    afterAction: function(el){
        //remove class active
        this
        .$owlItems
        .removeClass('active')
        //add class active
        this
        .$owlItems //owl internal $ object containing items
        .eq(this.currentItem + 1)
        .addClass('active')
        }
// END NEW PART

    responsive:{
        0:{
            items:1,
            stagePadding: 450
        },
        600:{
            items:1,
            stagePadding: 450
        },
        1000:{
            items:1,
            stagePadding: 450
        }
    }
});
javascriptjquerycssowl-carousel
5
Gabbax0r

Owl Carouselは、1つだけでなく、表示されているすべてのアイテムに.activeクラスを追加します。

ただし、 centerオプション を使用すると、中央のアイテムのみが.centerクラスを取得します。

このデモを見てください： https://codepen.io/glebkema/pen/Xjryjd

$('.owl-carousel').owlCarousel({
  autoplay: true,
  center: true,
  loop: true,
  nav: true,
});
.owl-item.active > div:after {
  content: 'active';
}
.owl-item.center > div:after {
  content: 'center';
}
.owl-item.active.center > div:after {
  content: 'active center';
}
.owl-item > div:after {
  font-family: sans-serif;
  font-size: 24px;
  font-weight: bold;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.css">

<div class="owl-carousel">
  <div><img src="//placehold.it/300x300/936/fff/?text=1" alt=""></div>
  <div><img src="//placehold.it/300x300/693/fff/?text=2" alt=""></div>
  <div><img src="//placehold.it/300x300/369/fff/?text=3" alt=""></div>
  <div><img src="//placehold.it/300x300/f63/fff/?text=4" alt=""></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.0.0-beta.2.4/owl.carousel.min.js"></script>

PSあなたはあなたのコードを単純化することができます。

items:3,
responsive:{
    0:{
        items:1,
        stagePadding: 450
    },
    600:{
        items:1,
        stagePadding: 450
    },
    1000:{
        items:1,
        stagePadding: 450
    }

と同等です

items:1,
stagePadding: 450,

PPS。 450は、狭い画面で stagePaddingオプション にとって非常に巨大です。

9
Gleb Kemarsky