如何在 bxslider 中居中幻灯片，因此不会裁剪幻灯片答案

【问题标题】：how to center slides in bxslider, so no slides are cropped如何在 bxslider 中居中幻灯片，因此不会裁剪幻灯片
【发布时间】：2013-05-28 18:45:54
【问题描述】：

请看一下我正在开发的当前站点：http://debourg-dev.ch/eliterent/ 对于底部品牌徽标滑块，我使用的是 bxslider。我想知道是否有办法使幻灯片（徽标）居中并防止 bxslider '半显示'徽标，因为根据查看它的分辨率，有时它会显示一个裁剪的徽标，如果它不能将它们全部放入屏幕。理想情况下，我只希望它能够完整显示适合当前窗口的徽标。

非常感谢

【问题讨论】：

标签： jquery css slider centering bxslider

【解决方案1】：

通过调整删除它可以很容易地将每个图像集中在其li 中：

.bx-wrapper img {
    display: block;
}

并添加：

.bx-wrapper li {
    text-align: center;
}

但我认为你在种植问题上不走运。我打算建议在lis 上设置一个% 宽度，但这会将它们设置为与非常宽的ul 相关，所以这不起作用。不过，您可能可以使用 JS 来做到这一点。

【讨论】：

【解决方案2】：

为了摆脱裁剪并使幻灯片适合任何分辨率，您需要知道幻灯片的宽度和边距，然后您可以使用 bxslider 容器的宽度计算 maxSlides。

Math.floor($('#container').width() / (slide_width + slide_margin));

See working example

【讨论】：

我在同一条船上，然后我发现了这个......它可以工作，但每次调整页面大小时都必须刷新页面......它工作正常，但使用 iPad 或其他东西可以在转动它时更改它的屏幕分辨率，如果我可以调整浏览器的大小以查看更改会更好...有没有办法调整此代码使其能够以这种方式运行？
您可以在 CSS 中使用与视口相关的测量单位。