Estou a desenvolder um site cujo as páginas irão ter 3 ou 4 sliders (bxsliders) o meu problema é que eu gostaria de formatar um por um, especialmente as margins dos botões em baixo (http://bxslider.com/examples/manual-show-without-infinite-loop), pois há sliders que possuem mais height
do que outros, mas esse campo do bxslider.css serve todos os bxlslider()
.
Todos os elementos dentro de cada slider são iguais, o que muda é de slider para slider. Alguma dica? HTML:
<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.</p></div>
<div id="joaquim"><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"><h1>MIGUEL NUNES</h1><h2>INOVAÇÃO</h2><p>Novos conceitos e empreendorismo<br><br>Inovação e novas tecnologias.</p></div>
</div>
<div id="missValMob">
<div id="mission"><h1>MISSÃO</h1><p>A Intertráfego tem como principal missão crescer em conjunto com os seus parceiros, sempre com alta qualidade de serviço e flexibilidade na resolução das necessidades dos seus clientes. Acreditamos que a chave do sucesso está na disponibilidade e empenho que alocamos a cada projecto o que se revela também nas nossas práticas e ambições além fronteiras.</p></div>
<div id ="val"><h1>VALORES</h1><p>A identidade da Intertráfego é moldada pelos seus clientes e serviços. Quatro valores fundamentais unem a empresa e formam a base da cultura de sucesso empresarial da mesma: Segurança, Inovação, Fiabilidade e Flexibilidade. Os valores assentam na herança das suas gerações e são fonte de inspiração para o futuro.</p></div>
</div>
JavaScript
$('#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;
}
![inserir a descrição da imagem aqui][1]
Por ex: Gostaria de poder aproximar mais do texto os botões da div de cima (namesJobsMob) mas sem mexer nos botões da div de baixo (missValMob). [files]http://www.datafilehost.com/d/15ddf068
JS:
$('#namesJobsMob, #missValMob').bxSlider({
infiniteLoop: false,
touchEnabled:true,
pagerSelector: $('#hey')
});
HTML:
<div id="missValMob">
<div id="missionMob"><h1>MISSÃO</h1><p>A Intertráfego tem como principal missão crescer em conjunto com os seus parceiros, sempre com alta qualidade de serviço e flexibilidade na resolução das necessidades dos seus clientes. Acreditamos que a chave do sucesso está na disponibilidade e empenho que alocamos a cada projecto o que se revela também nas nossas práticas e ambições além fronteiras.</p></div>
<div id ="valMob"><h1>VALORES</h1><p>A identidade da Intertráfego é moldada pelos seus clientes e serviços. Quatro valores fundamentais unem a empresa e formam a base da cultura de sucesso empresarial da mesma: Segurança, Inovação, Fiabilidade e Flexibilidade. Os valores assentam na herança das suas gerações e são fonte de inspiração para o futuro.</p></div>
</div>
<div id="hey"></div>
CSS:
#hey {
width: 30px;
height:30px;
background-color: green;
margin: 0 auto;
}