1

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;
}
4
  • Se o problema dos tamanhos das imagens fossem resolvidos estaria bom? Commented 10/03/2014 às 21:27
  • Nem há imagens, é só texto, coloquei o HTML em cima. Não sei porquê mas a especificação com o id da div não funciona como sugeriu o @Michael em baixo
    – Miguel
    Commented 10/03/2014 às 21:29
  • Você pode tirar um print e colocar na pergunta pra melhorar um pouco? Commented 10/03/2014 às 21:30
  • Adicionei, obgado
    – Miguel
    Commented 10/03/2014 às 21:36

2 Respostas 2

1

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

8
  • Não funcionou até coloquei valores absurdos mas só mexeu as margens laterais ' #namesJobsMob .bx-pager.bx-default-pager a { margin: 700px 0 25px 0 !important; } #missValMob .bx-pager.bx-default-pager a { margin: 0px 0 30px 0 !important; }'
    – Miguel
    Commented 10/03/2014 às 19:51
  • será que tenho de apagar alguma coisa nos css? é que parece que não está a apanhar a especificação
    – Miguel
    Commented 10/03/2014 às 19:52
  • você pode adicionar o seu código HTML à pergunta? Assim fica mais fácil descobrir o problema. Obrigado!
    – Michael
    Commented 10/03/2014 às 20:23
  • Fiz o update em cima. Eu é que agradeço
    – Miguel
    Commented 10/03/2014 às 21:07
  • Olá! Dei uma estudada melhor no bxSlider e acho que agora entendi o problema. Editei a resposta. Espero que resolva agora! =)
    – Michael
    Commented 11/03/2014 às 14:19
0

Tenta isso.

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

#missValMob .bx-pager.bx-default-pager a {
   display: block;
   top: -20px;
}
3
  • Se não funcionar só poderei te ajudar se você disponibilizar o código completo. Commented 10/03/2014 às 21:51
  • Ok Obgado, amanha ponho num filehost e comento aqui. Muito obgado Sr.
    – Miguel
    Commented 10/03/2014 às 22:08
  • Ok vou estar on apenas depois das 5h Commented 10/03/2014 às 22:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .