JQuery bxslider conflict

Question

Я разрабатываю веб-сайт, на котором будут отображаться 3-4 слайдера (bxsliders) на странице, моя эмблема - это то, что хотелось бы форматировать один за другим, особенно по высоте и краю кнопки ниже (http://bxslider.com/examples/manual-show-without-infinite-loop), но это поле на bxslider.css обслуживает все слайдеры.

JS:

$('#namesJobsMob').bxSlider({ 
     infiniteLoop: false, 
     hideControlOnEnd: true, 
     touchEnabled:true 
}); 
     $('#missValMob').bxSlider({ 
     infiniteLoop: false, 
     hideControlOnEnd: true, 
     touchEnabled:true 
}); 

CSS:

.bx-wrapper .bx-pager.bx-default-pager a { 
margin: -50px 25px; 
} 

Например: я owuld один, чтобы иметь запас маржи: -50px 25px; и другое поле: -10px 40px;

Answer 1

Когда я хочу иметь несколько bxsliders на странице, я обернуваю их в divs один за другим. Например:

<div id="firstslider"> 
<ul id="slider1"> 
<li>image1</li> 
<li>image2</li> 
</ul> 
</div> 

<div id="secondslider"> 
<ul id="slider2"> 
<li>image3</li> 
<li>image4</li> 
</ul> 
</div> 

После этого вы можете нацелить на определенный .bx-обертку таким образом:

#firstslider .bx-wrapper .bx-pager.bx-default-pager a { 
margin: -50px 25px; 
}