I've noticed that "!important" is required throughout the CSS. I came across the padding and alignment issues because my sliders are in containers that have specific pixel dimensions. So I require all sides flush.
Do these work for you? You'll need to find and replace these codes.
.bx-wrapper {
position: relative !important;
top:0px;
margin:0 !important;
padding: 0 !important;
vertical-align:top !important;
}
.bx-wrapper img {
position:absolute !important;
top:-13px !important;
max-width: 100% !important;
max-height: 100% !important;
display: block;
margin: 0 auto !important;
padding:0 !important;
}
And
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: 0 !important;
width: 100%;
z-index:1000 !important;
}
And
.bx-wrapper .bx-caption {
display:block !important;
position: absolute;
bottom:-2px !important;
left: 0;
margin-bottom:15px !important;
padding-bottom:15px !important;
background: #666\9;
background: rgba(0,0,0,0.7) !important;
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #ffffff !important;
font-family: Arial;
display:block !important;
font-size:14px !important;
font-weight:normal !important;
}