Ширина не соблюдается в bxSlider

Question

Я пытаюсь сделать слайд-шоу с плагином jQuery bxSlider.

В конце концов, что я пытаюсь достичь этого: http://i.imgur.com/yae1Gvy.jpg

Хотя я только что нашел этот образ онлайн. Я не слишком беспокоюсь о полосе прокрутки. Я просто хочу, чтобы 2 из 3 изображений покинули страницу. bxSlider имеет возможность установить ширину слайдов (slideWidth), и я хочу, чтобы ширина была шириной изображения: 680px.

Контейнер из 3-х слайдов, однако, не будет помещать все 3 слайда по их нормальной ширине, поэтому он максимизирует каждый снимок в $ (window) .width()/3, а затем применяет это как встроенный стиль, поэтому я не могу переопределить Это. Если я изменю значение на меньший, то он отлично работает и прекрасно вписывается в контейнер, но мне нужно, чтобы он вышел из окна просмотра.

По сути, это то, что я хотел бы достичь, и им 90% там помимо выпуска замасливающей: http://www.aucklanddj.co.nz/weddings

Сайт связан выше использует тот же JQuery плагин.

Heres мой код:

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

}); 

Я пропускаю что-то, где есть возможность для максимальной ширины или что-то? Я, должно быть, просмотрел страницу с настройками за несколько часов и ничего не нашел ... также много искал, но не совсем уверен, задаю ли я правильные вопросы.

Любая помощь была бы принята с благодарностью.

Answer 1

ОК, так что получается, что моя проблема была с содержащим элементом.

В основном мне пришлось добавить 2, содержащих divs. Мой HTML теперь выглядит следующим образом:

<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> 

и мой CSS для этих контейнеров:

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

Если вам нужно сосредоточить все избавиться от ширины в первом контейнере.

Javascript точно такой же, как в исходном вопросе.

Понятно, что мои навыки именования div могут принести некоторые улучшения, но это решило проблему для меня!

Надеюсь, это поможет любому, кто хочет сделать то же самое.