web-dev-qa-db-ja.com

フクロウカルーセル-幅の計算が間違っています

3つのレスポンシブアイテム（img）がありますが、フクロウカルーセルが読み込まれるたびに、フクロウラッパーの幅はすべての画像を合わせたサイズの2倍になります。例えば;フルサイズの画像が1583ピクセルの場合、フクロウラッパーは1583 * 3 * 2 = 9498ピクセルを使用し、すべてのサイトはフルサイズ（1583ピクセル）ではなくこの幅を使用します。

問題： http://nacionalempreendimen.web2144.uni5.net

HTML

<div id="promoted-carousel">
    <div class="item"><img src="assets/img/tmp/1.jpg"></div>
    <div class="item"><img src="assets/img/tmp/2.jpg"></div>
    <div class="item"><img src="assets/img/tmp/3.jpg"></div>
</div>

CSS

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

JS

$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});

[〜＃〜]更新[〜＃〜]

#promoted-carouseldivを.page-wrapper divから外すと、正しく機能することがわかりました。しかし、cssに関する私の知識は、なぜそれが機能するのかを理解するのに十分ではありません。

javascriptjqueryhtmlcssowl-carousel
7
Vinicius Ottoni

それは私を助けました：

setTimeout(function() {
    $('#promoted-carousel').owlCarousel({
        autoPlay: 5000,
        stopOnHover: true,
        singleItem: true
    });
}, 10);
1
maLikiz

このソリューションは私にも役立ちました。テーマがブートストラップ4を使用していて、フクロウプラグインがブートストラップ3を使用している場合、これによりフクロウの幅の問題が修正されます。

 setTimeout(function() {
$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});
}, 10);
1
Disney Land 2017

フクロウのカルーセルを使用するときは、2つのラッパーをよく使用します。スライドごとにすべてのスタイルを高さ/幅などに設定し、外側のラッパーをステージの幅などに設定しました。

次に、内側のラッパーでフクロウのカルーセルを呼び出しますが、通常、問題はほとんどありません。

<div id="promoted-carousel-outer">
    <div id="promoted-carousel">
        <div class="item"><img src="assets/img/tmp/1.jpg"></div>
        <div class="item"><img src="assets/img/tmp/2.jpg"></div>
        <div class="item"><img src="assets/img/tmp/3.jpg"></div>
    </div>
</div>
1
Anto

信じられないことに、これはowlCarousel内のバグである可能性があります。

私を助けたのは、appendWrapperSizesの* 2を削除することでした。

    appendWrapperSizes : function () {
        var base = this,
            width = base.$owlItems.length * base.itemWidth;

        base.$owlWrapper.css({
            "width": width,//Comment out this part=> * 2,
            "left": 0
        });
        base.appendItemsSizes();
    },

これはowlCarousel1.3.3で機能しました。

0
Michael Litvin

この問題は既知の問題です。テーブルにtable-layout: fixedを置く必要があります。

https://github.com/OwlFonk/OwlCarousel/issues/274

0
crazypsycho