Skip to main content
Adicionei link para a página de opções do bxSlider
Fonte Link
Michael
  • 3,5mil
  • 13
  • 17

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 &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 {          <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!

Tente isso:

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

#missValMob .bx-pager.bx-default-pager a {
    margin: -20px 30px;
}

Se não funcionar, tente colocar um !important depois da declaração. Ex:

margin: -20px 30px !important;

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

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

Depois:

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

Repare que os elementos de paginação (os quais você quer mudar) estão lá no final, fora do div "namesJobsMob". Assim, não será possível fazer o #namesJobsMob .bx-pager.bx-default-pager 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!

Fonte Link
Michael
  • 3,5mil
  • 13
  • 17

Tente isso:

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

#missValMob .bx-pager.bx-default-pager a {
    margin: -20px 30px;
}

Se não funcionar, tente colocar um !important depois da declaração. Ex:

margin: -20px 30px !important;