web-dev-qa-db-ja.com

Xアイテム未満の場合はOwlCarouselを中央に配置

レスポンシブサイトではOwlCarousel1.3.3を使用しています。アイテムの最大数を4に設定しました。

$container.owlCarousel({
    items: 4,
    itemsDesktop: [1000, 4], 
    itemsDesktopSmall: [900, 3], 
    itemsTablet: [600, 2], 
    itemsMobile: [480, 1]
});

カルーセルに4つ以上の画像が含まれている限り、すべてが正常に機能します。ただし、編集者が追加するアイテムが3つ以下の場合は、それらのアイテムをページの中央に配置する必要があります。現在、それらは「左揃え」であり、見栄えがよくありません。

オプションitemsScaleUpは私が探しているものではありません。アイテムが4に設定されているが、カルーセルに1つのアイテムしか含まれていない場合、そのアイテムは大きくなりすぎます。

私はgithubでこれらの問題を見つけました：
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
しかし、私が役立つと思うものは何もありません。

この問題は codepen で確認できます。

更新：
OwlCarouselのソースを見ると、.owl-wrapper要素の幅は2倍になります。しかし、その理由と、乗数を削除しても安全かどうかはわかりません。

私はこれを開いた github issue いくつかの説明を得るために。

javascriptcsscarouselowl-carousel
9
pstenstrm

OwlCarouselには、.owl-wrapper要素の幅に2倍の乗数があります。この乗数は、カルーセルがいっぱいになっていないときに、カルーセルを中央に配置することを非常に困難にします。

ただし、この乗数には理由がないようです。取り外しても何も壊れないようです。それが私がしたことです。更新されたowl.carousel.jsはここにあります： https://github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier

そして私はこのCSSを追加しました（これはリポジトリに含まれていません）：

.owl-wrapper {
    margin: 0 auto;
}
9
pstenstrm

新しいバージョンのOwlCarousel 2では、次のcssを追加する必要があります。

.owl-stage{
    margin: 0 auto;
}

この作品はバージョン2で私のためのものです。

よろしく！

13
Radames E. Hernandez

ソースを変更する代わりに、afterInitメソッドとufterUpdateメソッドを使用できます。このようなもの：

        var owl = $('#carousel');
         owl.owlCarousel({
                        items 6,
                        afterInit: function () {
                            owl.find('.owl-wrapper').each(function () {
                                var w = $(this).width() / 2;
                                $(this).width(w);
                                $(this).css('margin', '0 auto');
                            });
                        },
                        afterUpdate: function () {
                            owl.find('.owl-wrapper').each(function () {
                                var w = $(this).width() / 2;
                                $(this).width(w);
                                $(this).css('margin', '0 auto');
                            });
                        }
                    });
4
Vlad Los

これは、flexboxを使用して私のために働いた可能な解決策でもあります。

.owl-stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}
1
Marcus Christiansen

Owlcarousel2のソリューション

var owl = $('.owl-carousel');
owl.owlCarousel();
$(window).on('resize load', function() {
    var outerStage = owl.find('.owl-stage-outer');
    var outerWidth = Number(outerStage.css('width').replace('px', ''));
    var width = Number(owl.find('.owl-stage').css('width').replace('px', ''));
    if (width < outerWidth)
        outerStage.css('left', Math.ceil(outerWidth - width)/2 + 'px');
    else 
        outerStage.css('left',0);
});
1
Vlad Alivanov

これを変える：

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    display:inline-block;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }

この

.owl-carousel {
    display: none;
    width: 100%;
    text-align:center;
}
1
Tóth Balázs