我正在努力创建一个投资组合网站,但我一直在使用轮播时遇到问题。我决定尝试 bxslider,因为我喜欢它的样式,但是关于如何让图像在视口(viewport)中居中的问题已经困扰我一周了。
我已设法启动并运行 slider ,但我的图像始终显示为偏离中心,好像某处存在一些冲突的 CSS。图像为 800 像素 x 300 像素 - 我可以通过设置 slideWidth:800
将框的宽度设置为 800px,但这并不能解决问题。您可以看到字幕被截断了 - 图像被向下和向右移动。
查看 test page - 这是使用未经修改的 bxslider 副本,没有额外的 CSS。
如有任何帮助,我们将不胜感激——我确信这很简单,但我对此还是个新手!
最佳答案
它们偏离中心是因为您的图像太大,并且它们是左对齐的,因此它们从父图像向右延伸。描述您想要的布局,我可以提供进一步的帮助。这是一个猜测:
.bx-wrapper img {
width: 720px;
height: 230px;
}
.bx-wrapper .bx-caption {
width: 720px;
}
你也可以这样做:
.bx-wrapper {
width: 880px;
}
.bx-viewport {
height: 340px;
}
根据您的评论更新:
.bx-viewport ul {
margin: 0;
padding: 0;
}
关于jquery - BXSlider 中的图像偏离中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15180421/