Tente isso(Estou editando a resposta completamente porque a solução será bem diferente do que eu previa)
O Problema
Quando você aplica o bxSlider num elemento, ele altera a estrutura do HTML. Veja só:
Antes:
#namesJobsMob<div id="namesJobsMob">
<div id="pedro">
<h1>PEDRO NUNES & TOMÉ ELIAS</h1>
<h2>MATURIDADE</h2>
<p>
Fundadores
<br><br>
Experiência de mercado e metodologia.bx
</p>
</div>
<div id="joaquim">
<h1>JOAQUIM PEDRO & RUI NUNES</h1>
<h2>PARCERIAS</h2>
<p>
Experiência e know-pagerhow no mercado internacional, participando em congressos e feiras internacionais
<br><br>
Rede de contactos, agentes, fornecedores e clientes.bx
</p>
</div>
<div id="miguel">
<h1>MIGUEL NUNES</h1>
<h2>INOVAÇÃO</h2>
<p>
Novos conceitos e empreendorismo
<br><br>
Inovação e novas tecnologias.
</p>
</div>
</div>
Depois:
<div class="bx-defaultwrapper" style="max-pagerwidth: a100%;">
{ <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 198px;">
margin <div id="namesJobsMob" style="width: 515%; position: relative; -50pxwebkit-transition: 25px;0s; transition: 0s; -webkit-transform: translate3d(0px, 0px, 0px);">
}
<div id="pedro" style="float: left; list-style: none; position: relative; width: 1407px;">
#missValMob <h1>PEDRO NUNES & TOMÉ ELIAS</h1>
<h2>MATURIDADE</h2>
<p>
Fundadores
<br><br>
Experiência de mercado e metodologia.
</p>
</div>
<div id="joaquim" style="float: left; list-style: none; position: relative; width: 1407px;">
<h1>JOAQUIM PEDRO & RUI NUNES</h1>
<h2>PARCERIAS</h2>
<p>
Experiência e know-how no mercado internacional, participando em congressos e feiras internacionais
<br><br>
Rede de contactos, agentes, fornecedores e clientes.
</p>
</div>
<div id="miguel" style="float: left; list-style: none; position: relative; width: 1407px;">
<h1>MIGUEL NUNES</h1>
<h2>INOVAÇÃO</h2>
<p>
Novos conceitos e empreendorismo
<br><br>
Inovação e novas tecnologias.
</p>
</div>
</div>
</div>
<div class="bx-controls bx-has-pager. bx-has-controls-direction">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">
a { <a href="" data-slide-index="0" class="bx-pager-link active">1</a>
margin: </div>
<div class="bx-20pxpager-item">
30px; <a href="" data-slide-index="1" class="bx-pager-link">2</a>
} </div>
<div class="bx-pager-item">
<a href="" data-slide-index="2" class="bx-pager-link">3</a></div>
</div>
<div class="bx-controls-direction">
<a class="bx-prev disabled" href="">Prev</a>
<a class="bx-next" href="">Next</a>
</div>
</div>
</div>
Se não funcionarRepare que os elementos de paginação (os quais você quer mudar) estão lá no final, tente colocar umfora do !importantdiv
depois da declaração"namesJobsMob". Ex:
Assim, não será possível fazer o margin:#namesJobsMob .bx-20px 30pxpager.bx-default-pager !important;a
que eu havia proposto antes.
A solução
Para solucionar o problema, você pode mover o "pager" para outra div, usando a opção "pageSelector" do bxSlider. Assim:
$('#namesJobsMob').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
touchEnabled:true,
pagerSelector: $('#meu-pager-legal-1'),
});
Então, adicione uma div separada, mais ou menos assim:
<div id="namesJobsMob">
....
</div>
<div id="meu-pager-legal-1"></div>
Agora fica fácil customizar o tamanho, ou margem, ou qualquer outra coisa:
#meu-pager-legal-1 {
margin: -50px 25px;
}
Espero que funcione!