web-dev-qa-db-ja.com

bxSlider-高さと幅の設定

BxSliderを使い始めたばかりで、問題が発生しました。幅が固定されたスライダー（すべての画像の値が同じ）と高さを調整する必要があります。これはかなり標準的なタスクですが、行き詰まっており、どうすればよいかわかりません。現在、bxSliderは画像のサイズを変更しており（これを行うべきではありません）、高さは静的です。もう1つの問題は、スライダーがページの中央に配置されておらず、幅が適切でないことです。

サイズ例はご利用いただけなくなりました。

これは私のjQuery初期化コードです：

        $(window).load(function() {
        $('.bxslider').bxSlider({
            mode: 'fade',
            captions: true,
            pagerCustom: '#bx-pager',
            adaptiveHeight: true
        });
    });

関連するHTMLコードはページにあります（ソースコード行53）。

編集：

現在、センタリングの問題は解決されていますが、bxSliderは画像を同じ高さと同じ幅に変形しています。私はそれらに同じ幅（元の画像と同じ）と高さをアダプティブにする必要があります。

jquerysliderbxslider
8
Darkry

Bxslider options のあるページからのslideWidthプロパティについてはどうですか

The width of each slide. This setting is required for all horizontal carousels!

このような：

$('.bxslider').bxSlider({
   mode: 'fade',
   captions: true,
   pagerCustom: '#bx-pager',
   adaptiveHeight: true,
   slideWidth: 150
});

追加：

.bx-wrapper img {
    margin: 0 auto;
}
6
webdeveloper

メディアブレークポイントで画像の高さと幅を設定するのはうまくいきました。

.bx-wrapper img {
   width: 140px;
   height: 140px;
}

@media screen and (max-width: 767px) {
    .bx-wrapper img {
        width: 70px;
        height: 70px;
    }
}
2
Sneha S