Images off-center in BXSlider

Question

I'm working on creating a portfolio site, but I keep having trouble with a carousel. I decided to try bxslider because I like the styling, but it's been bothering me for a week now as to how to get the images to center in the viewport.

I've managed to get the slider up and running, but my images keep showing up as off-center, as though there's some conflicting CSS somewhere. The images are 800px by 300px - I can set the width of the box to 800px by setting slideWidth:800, but that doesn't fix the issue. You can see that the captions are cut off - the image is being shifted down and right.

See a test page - this is using an unmodified copy of bxslider and no additional CSS.

Any help would be greatly appreciated -- I'm sure it's something simple, but I'm still newish to this!

Answer 1

They're off center because your images are too large, and they're left-aligned so they extend out of their parents to the right. Describe what layout you're after and I can help further. Here's a guess:

.bx-wrapper img {
    width: 720px;
    height: 230px;
}
.bx-wrapper .bx-caption {
    width: 720px;
}

You could also do this:

.bx-wrapper {
    width: 880px;
}
.bx-viewport {
    height: 340px;
}

Update based on your comments:

.bx-viewport ul {
  margin: 0;
  padding: 0;
}