BXSlider偏离中心的图像

Question

我正在创建一个投资组合网站，但我一直遇到旋转木马问题。我决定尝试使用bxslider，因为我喜欢这种造型，但是现在关于如何让图像在视口中居中，这一直困扰着我。

我已经设法让滑块启动并运行，但我的图像一直显示为偏离中心，好像某处存在一些冲突的CSS。图像是800px乘300px - 我可以通过设置slideWidth:800将框的宽度设置为800px，但这不能解决问题。您可以看到标题被截断 - 图像向下和向右移动。

请参阅test page - 这是使用未经修改的bxslider副本，而不是其他CSS。

任何帮助都会非常感激 - 我确信这很简单，但我仍然对此很新！

Answer 1

他们偏离中心是因为你的图像太大了，而且他们是左对齐的，所以他们从父母那里向右延伸。描述你想要的布局，我可以进一步提供帮助。这是一个猜测：

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