Width not being respected in bxSlider

Question

I am trying to make a slideshow with the jQuery plugin bxSlider.

Ultimately what I am trying to achieve is this: https://i.stack.imgur.com/iUhYs.jpg

Although I just found that image online. I'm not too worried about the scroll bar. I just want 2 of the 3 images to go off the page. bxSlider has an option to set the width of the slides (slideWidth) and I want that width to be the width of the image: 680px.

The container of the 3 slides however will not fit all 3 slides at their normal width so it maxes each slide out at $(window).width() / 3 and then applies that as an inline style so i cant override it. If i change the value to a smaller one then it works fine and fits nicely into the container but i need it to go out of the viewport.

Essentially this is what I would like to achieve and im 90% there apart from the sizing issue: http://www.aucklanddj.co.nz/weddings

The website linked above is using the same jQuery plugin.

Heres my code:

HTML:

<ul class="slide-container">
    <li><img src="images/1.jpg" title="THis is a really cool car you should buy it blablabla" /></li>
    <li><img src="images/2.jpg" title="blqblqbql qblqblq qblqblq blq blablabla" /></li>
    <li><img src="images/3.jpg" title="loajs dljas dlajsd alsjd alsjd laj"/></li>
</ul>

Javascript:

$(document).ready(function(){

$('.slide-container').bxSlider({
        auto: true,
        useCSS: false,
        pager: false,
        controls: false,
        autoHover: true,
        minSlides: 3,
        maxSlides: 3,
        slideWidth: 680,
        slideMargin: 0,
        preloadImages:"visible",
        moveSlides: 1,
        captions: true,
        responsive: false
    });

});

Am I missing something where there is an option for max width or something? I must have looked over the options page for a good few hours and not found anything...also googled it a lot but not quite sure if I'm asking the right questions.

Any help would be greatly appreciated.

Answer 1

OK so it turns out my problem was with the containing element.

Basically I had to add 2 containing divs. My HTML now looks like this:

<div class="slider-outer-container">
        <div class="bx-slide-container">
            <ul class="bx-slides">
                <li><img src="images/1.jpg" title="THis is a really cool car you should buy it blablabla" /></li>
                <li><img src="images/2.jpg" title="blqblqbql qblqblq qblqblq blq blablabla" /></li>
                <li><img src="images/3.jpg" title="loajs dljas dlajsd alsjd alsjd laj"/></li>
            </ul>
        </div>
    </div>

and my css for those containers:

.slider-outer-container{
    overflow:hidden;
}
.bx-slide-container{
    width:3120px;
    margin-left:-1040px;
    margin-right:-1040px;
}

If you need to center everything get rid of the width in the first container.

The Javascript is exactly the same as in the original question.

Clearly my div naming skills could do with some improvement but that solved the problem for me!

Hope this helps anyone else looking to do the same thing.