Question

我justed开始使用bxSlider，我遇到了一个问题。我想要一个固定宽度的滑块（所有图像具有相同的值）和自适应高度。这是一个相当标准的任务，但我被困住了，我不知道该怎么做。现在bxSlider正在调整我的图像（它不应该这样做）并且高度是静态的。另一个问题是滑块不在页面的中心，并且没有正确的宽度。

示例尺寸不再可用。

这是我的jQuery初始化代码：

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

并且可以在页面上找到相关的HTML代码（源代码行53）。

修改

现在解决了居中问题，但是bxSlider仍在使图像变形以具有相同的高度和相同的宽度。我只是希望它们具有相同的宽度（原始图像具有的宽度）和高度以适应。

Answer 1

如果slideWidth属性，来自bxslider options

的页面怎么样？

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;
}

Answer 2

设置高度＆amp;媒体断点上的图像宽度对我有用。

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

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

bxSlider - 高度和宽度设置

2 个答案: