jquery - BXSlider 中的图像偏离中心

Question

我正在创建一个投资组合网站，但我一直遇到轮播问题。我决定尝试 bxslider，因为我喜欢它的样式，但是我已经困扰了我一个星期了，如何让图像在视口中居中。

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

查看测试页面- 这是使用未经修改的 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;
}