web-dev-qa-db-ja.com

フクロウカルーセル2がループと1アイテムで機能しない（バグ修正）

カルーセルの内容については、フクロウカルーセル2を使用します。

JS：

$('#owl-demo').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 1,
});

HTML：

<div id="owl-demo" class="owl-carousel">
    <div class="item"><h4>1</h4></div>
</div>

問題：

1つのコンテンツ（PHPを使用した動的コンテンツ）がある場合loop:trueおよびitems:1動作せず、空白が表示されますが、2つのコンテンツを追加すると、Owlは正常に動作しました!!

[〜＃〜] edit [〜＃〜]：私のコンテンツは動的です（1-....）。私の結果が1つのコンテンツフクロウに問題がある場合。

問題 [〜＃〜] demo [〜＃〜]

働いた [〜＃〜] demo [〜＃〜]

この問題をどのように修正しますか？

javascriptjqueryhtmlcssowl-carousel
8
Perspolis

このバグをOwl開発者グループに報告し、この問題を修正します here 。

Commit でこの行を変更します

view = Math.max(settings.items * 2, 2),

これは demo で機能しました

9
Perspolis

以下の方法で問題が解決することを願っています。
フクロウカルーセルjsを編集する必要はありません。 Bx Sliderにも同じ方法を適用できます。

$('.owl-demo').owlCarousel({
    margin: 0,
    responsiveClass: true,
    smartSpeed: 500,
    dots: ($(".owl-carousel .item").length > 1) ? true: false,
    loop:($(".owl-carousel .item").length > 1) ? true: false,
    responsive: {
        0: {
            items: 1,
        },
        500: {
            items: 1,
        },
        768: {
            items: 1,
        }
    } 
})
5
fluidbrush

この方法を使用して問題を解決しましたが、非常に簡単だと思います。

var options={
    margin: 10,
    nav: true,
    items: 1
    };
   if($('#owl-demo .owl-item').length>1){
       options.loop=true;
   }
   $('#owl-demo').owlCarousel(options);
4
Tohid Dadashnezhad

次のようにプラグインを呼び出す前に、.item要素の数を確認できます。

// Be more specific with your selector if .items is used elsewhere on the page. 
var items = $('.items');
if(items.length > 1) {
    $('#owl-demo').owlCarousel({
        loop: true,
        ...
    });
} else {
    // same as above but with loop: false;
}
3
CaldwellYSR

OwlCarouselにバナー画像として単一の画像のみを配置する場合、owl carousel jsに引数を1つ追加できます。

singleItem: true

このような：

<script type="text/javascript">
    $(document).ready(function() {
        $('#main_banner').owlCarousel({
            margin: 0,
            loop: true,
            navText: [ "<img src='images/leftArrow.png'>", "<img src='images/rightArrow.png'>" ],
            dots: false,
            items :1,
            autoplay: true,
            singleItem: true
        });
    });
    </script>
1
Ashish v