如何将幻灯片放在bxslider中心,因此不会裁剪任何幻灯片

时间:2013-06-02 12:35:45

标签: jquery css slider centering bxslider

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

非常感谢

2 个答案:

答案 0 :(得分:5)

通过调整删除它,可以很容易地将每个图像置于其li中:

.bx-wrapper img {
    display: block;
}

并添加此内容:

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

但我认为你对裁剪问题感到不幸。我打算建议在li s上设置%宽度,但这会将它们设置为与非常宽的ul相关,因此无效。不过,你可以用JS做到这一点。

答案 1 :(得分:2)

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

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

See working example