I'm developing a site whose pages will have 3 or 4 sliders (bxsliders) so my problem is that I'd like to format one by one, especially the margins of the buttons below ( link ), since there are sliders that have more height than others, but this bxslider.css field serves all bxlslider() .
All elements within each slider are the same, which changes from slider to slider. Any tips? 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;
}
! [insert image description here] [1]
Eg: I would like to get the buttons of the top div (namesJobsMob) closer to the text, but not touching the buttons on the bottom div (missValMob). [files] link
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;
}