How to format several bxSlider on the same page with different styles?

Question

I am developing a site whose pages will have 3 or 4 sliders (bxsliders) my problem is that I would like to format one by one, especially the margins of the buttons below (http://bxslider.com/examples/manual-show-without-infinite-loop), because there are sliders that have more height than others, but this bxslider.css field serves all bxlslider().

All the elements inside each slider are equal, what changes is from slider to slider. Any hints? 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]

For example: I wish I could get the top div buttons (namesJobsMob) closer to the text, but without touching the bottom div buttons (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;
}

Answer 1

(I am editing the answer completely because the solution will be quite different than I predicted)

The Problem

When you apply bxSlider to an element, it changes the structure of HTML. See only:

Before:

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

Afterward:

<div class="bx-wrapper" style="max-width: 100%;">
    <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 198px;">
        <div id="namesJobsMob" style="width: 515%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(0px, 0px, 0px);">

            <div id="pedro" style="float: left; list-style: none; position: relative; width: 1407px;">
                <h1>PEDRO NUNES &amp; 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 &amp; 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 href="" data-slide-index="0" class="bx-pager-link active">1</a>
        </div>
        <div class="bx-pager-item">
            <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>

Notice that the pagination elements (which you want to change) are there at the end, outside the div "namesJobsMob". Thus, it will not be possible to do the #namesJobsMob .bx-pager.bx-default-pager a that I had proposed before.

The solution

To solve the problem, you can move the "pager" to another div, using bxSlider’s "pageSelector" option. Thus:

$('#namesJobsMob').bxSlider({
    infiniteLoop: false,
    hideControlOnEnd: true,
    touchEnabled:true,
    pagerSelector: $('#meu-pager-legal-1'),

});

So add a separate div, more or less like this:

<div id="namesJobsMob">
    ....
</div>
<div id="meu-pager-legal-1"></div>

Now it’s easy to customize the size, or margin, or anything else:

#meu-pager-legal-1 {
    margin: -50px 25px;
}

I hope it works!

Answer 2

Try this.

#namesJobsMob .bx-pager.bx-default-pager a {
    display: block;
    top: -25px;
 }

#missValMob .bx-pager.bx-default-pager a {
   display: block;
   top: -20px;
}