4

フクロウのカルーセルで作成された複数のスライダーを含むページがあります。スライダーごとに異なる数の表示項目を定義したいと思います。完璧な解決策は、HTML で (クラスまたはデータとして) 表示可能なアイテムの数を定義することです。私はjQueryを使い始めたばかりなので、次のようなデータ属性を使用して値を渡すことしかできませんでした:

<div class="owl-carousel" data-itemsnumber="5">...</div>

次に、この値をJSの変数に適用し、この変数をこのようなアイテム番号の代わりに設定に追加しました。

var slides = $('.owl-carousel').data('itemsnumber');
$(".owl-carousel").owlCarousel(
{
  items: slides
});

最初のスライダーの値がページ上のすべてのスライダーに適用されるため、上記のコードは正しく機能しません。それぞれに異なる数のアイテムが必要です。どうすればこれを達成できますか？

前もって感謝します

4

3 に答える 3

2

Owl Carousel の css (バージョン 1 の場合 -- 実稼働環境では 2 を使用していません) は .owl-carousel と .owl-theme (スクリプトによって追加されます) です。すべてのスライダー間でスタイルを共有し、他のスライダーの特定のスタイルを共有しているため、.owl-carousel またはクラス名のみを使用.owl-controlsします。他のスタイルでは共有されていないためです。すべてのスライダーに対してグローバルである場合、.owl-controls のスタイルを設定できます。スライダーごとに異なるコントロールのスタイルを設定する必要がある場合は、.myfunky-slider .owl-controls {}.

そのスライダー用に独自のクラスを使用して、htmlで.owl-carousel を使用します。

<div class="mini-multi owl-carousel">
    ...items go here ...
</div>

<div class="content-slider owl-carousel">
    ...items go here ...
</div>

<div class="full-width-slider owl-carousel">
    ...items go here ...
</div>

jQuery を使用して、クラス名でそれらを呼び出します。

$(document).ready(function() {

    $(".content-slider").owlCarousel({
        ...OPTIONS...
     });


    $(".full-width-slider").owlCarousel({
        ...OPTIONS THAT are different ...
    });

    $(".mini-multi").owlCarousel({
        ...OPTIONS that are different ...

        items: 6,
        itemsDesktop: [1400, 6],
        itemsDesktopSmall: [1100, 4],
        itemsTablet: [700, 3],
        itemsMobile: [500, 2]
    });

});

共有または特定のクラス名に基づいて、共有および特定のスタイルでスタイルを設定します。

/* ---- base shared styles ---- */
.owl-carousel {
    ...styles...
}
.owl-pagination .owl-page span {
    ...styles...
}
.owl-pagination {
    ...styles...
}
.owl-page {
    ...styles...
}
.owl-controls {
    ...styles...
}
.owl-pagination .owl-page.active span,
.owl-controls.clickable .owl-pagination .owl-page:hover span {
    ...styles...
}

/* --- assumes all sliders will have fluid images  --- */

.owl-carousel .item img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- .mini-multi slider  --- */
.mini-multi .item {
    background:red;
}

/* --- .full-width-slider slider  --- */
.full-width-slider .item {
    border:5px solid green
}
于 2014-10-16T15:50:20.553 に答える