1

Bom dia pessoal, usei a API do instagram para mostrar as fotos do meu perfil no website e não encontrei nenhuma solução carousel que não conflitasse com jQuery do Magento, então comecei a fazer a mão mesmo.

Com a própria API do Instagram eu calculei o comprimento total da div.insta que eu precisa usando multiplicação e soma da quantidade e largura das fotos e atribui o resultado dessa matemática ao width dela mesma.

Por sua vez a div principal com um overflow:hidden esconde essa largura total ajudada por esse atributo, ou seja, a div que se abre pra receber todas as fotos continua além do comprimento do site, lógico e o conteúdo é escondido pela div principal.

Resultado:

inserir a descrição da imagem aqui

Agora eu preciso fazer com que a div.insta deslize horizontalmente para frente e para trás através destes botões prev / next que eu criei.

O site !!!!

1 Resposta 1

4

O método animate do jQuery pode resolver o seu problema. Você pode alterar a margem da sua div .insta de acordo com o tamanho das fotos, e o animate() te dá esse efeito de transição. Se você copiar

jQuery( '.right-direction' ).on( "click", function() {
  jQuery('.insta').animate({
        marginLeft: "-=250px",
    },1000, function() {
        console.log ('moveu');
    });
});

direto no console do seu site, você vai ver que o botão direito agora faz com que todo o seu conteúdo se mova para a esquerda. Você pode usar a mesma lógica para o botão esquerdo. Vale lembrar que o código acima não verifica se as imagens acabaram ou não, ele apenas transiciona a margem. Essa verificação vai depender do seu número de imagens que você tiver.

EDIT:

Acredito que o código a seguir reproduza o efeito que você está procurando:

var offset = 0;

var TOTAL_IMAGENS = 10; //contei a partir do seu HTML. Você pode chegar neste valor na maneira como achar melhor

if (offset === 0){
    jQuery('.left-direction').hide();
}

jQuery( '.right-direction' ).on( "click", function() {
  jQuery('.insta').animate({
        marginLeft: "-=250px",
    },1000, function() {
        ++offset;
        console.log(offset);
        jQuery('.left-direction').show(); 
        if(offset === TOTAL_IMAGENS){
            jQuery('.right-direction').hide();
        }
    });
});

jQuery( '.left-direction' ).on( "click", function() {
  jQuery('.insta').animate({
        marginLeft: "+=250px", 
    },1000, function() {
        --offset;
        console.log(offset);
        jQuery('.right-direction').show();
        if(offset === 0){
            jQuery('.left-direction').hide();
        }
    });
});

Veja que este código não está completamente otimizado (em vários momentos, executo as linhas jQuery('.left-direction').show(); e jQuery('.right-direction').show(); sem necessidade, mas, como prova de conceito, acredito que o código esteja bom. Se você quiser ser mais objetivo, pode controlar com duas flags se os botões estão lá ou não.

Basicamente, eu defini uma variável chamada offset que vai ser incrementada ou decrementada conforme você clica pelos botões de esquerda e direita. Como, no início, não vai ter nenhuma imagem na esquerda, eu já escondo a flecha da esquerda (se bem que isso você pode definir no CSS e economizar um pouco no seu JS). Se o meu offset cresce a ponto de ser o número total de fotos, eu escondo a flecha da direita. A lógica é basicamente essa. Como eu disse, esse código está longe de ser ótimo, mas acredito que já te dê uma boa noção.

2
  • Caio, me ajuda agora a parar no início e no fim das fotos? Eu tenho um largTotal se servir pra alguma coisa. 8/06/2015 às 16:01
  • @MarcosVinicius, veja minha resposta editada 8/06/2015 às 17:18

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 .