Skip to main content
adicionou 995 caracteres ao conteúdo
Fonte Link
Erick Gallani
  • 1,6mil
  • 1
  • 9
  • 16

Legal que conseguiu!

Vou dar uma sugestão de implementação aqui, menos estático e mais dinâmico.

var indexAtual = 0;
    
        $(document).ready(function(){
        
            var urlsImgs = $.map($(".owl-carousel-galeria").find('img'), function(obj, index) { return $(obj).attr('src') });
            
            $('.seta-direita').on('click', function(){
            
                indexAtual++;
            
                if(indexAtual >= urlsImgs.length) {
                    indexAtual = 0; //se chegou ao final do array, volta para o primeiro item
                }
            
                $('.img-main').attr('src', urlsImgs[indexAtual]);
            });
            
            $('.seta-esquerda').on('click', function(){
            
                indexAtual--;
            
                if(indexAtual < 0) {
                    indexAtual = (urlsImgs.length - 1); //se chegou ao começo do array, volta para o úlitmo item
                }
            
                $('.img-main').attr('src', urlsImgs[indexAtual]);
            });
        });

http://jsfiddle.net/aykoga40/

Legal que conseguiu!

Vou dar uma sugestão de implementação aqui, menos estático e mais dinâmico.

var indexAtual = 0;
    
        $(document).ready(function(){
        
            var urlsImgs = $.map($(".owl-carousel-galeria").find('img'), function(obj, index) { return $(obj).attr('src') });
            
            $('.seta-direita').on('click', function(){
            
                indexAtual++;
            
                if(indexAtual >= urlsImgs.length) {
                    indexAtual = 0; //se chegou ao final do array, volta para o primeiro item
                }
            
                $('.img-main').attr('src', urlsImgs[indexAtual]);
            });
            
            $('.seta-esquerda').on('click', function(){
            
                indexAtual--;
            
                if(indexAtual < 0) {
                    indexAtual = (urlsImgs.length - 1); //se chegou ao começo do array, volta para o úlitmo item
                }
            
                $('.img-main').attr('src', urlsImgs[indexAtual]);
            });
        });

http://jsfiddle.net/aykoga40/

adicionou 383 caracteres ao conteúdo
Fonte Link
Erick Gallani
  • 1,6mil
  • 1
  • 9
  • 16

Diego.

Imagino que o problema seja o seguinte.

Fazendo isso

var imgAtual = $('.img-main').attr('src');

Você está pegando o source da imagem sendo exibida e atribuindo ela a uma variável e ponto final, mais nada.

Na verdade você tem que alterar o source da imagem principal, fazendo assim.

$('.img-main').attr('src', urlDaImagem);

No evento de click.

Infelizmente sem mais informações sobre qual componente está utilizando nãoO ideal era quando o DOM da para ajudar muito maispágina carregar armazenar todas as referências das imagens dentro da div owl-carousel-galeria em um array e então mudar a imagem no next e prev do que issoimg-main ao clicar nos respectivos eventos.

Tipo assim.

$('.seta-direita').on(clickDeviceEvent, function(){
    $('.img-main').attr('src', refsImgs[indexAtual]);
});

Onde refsImgs são todas URLs das imagens e indexAtual uma variável global armazenando o index atual do seu carrossel.

Diego.

Imagino que o problema seja o seguinte.

Fazendo isso

var imgAtual = $('.img-main').attr('src');

Você está pegando o source da imagem sendo exibida e atribuindo ela a uma variável e ponto final, mais nada.

Na verdade você tem que alterar o source da imagem principal, fazendo assim.

$('.img-main').attr('src', urlDaImagem);

No evento de click.

Infelizmente sem mais informações sobre qual componente está utilizando não da para ajudar muito mais do que isso.

Diego.

Imagino que o problema seja o seguinte.

Fazendo isso

var imgAtual = $('.img-main').attr('src');

Você está pegando o source da imagem sendo exibida e atribuindo ela a uma variável e ponto final, mais nada.

Na verdade você tem que alterar o source da imagem principal, fazendo assim.

$('.img-main').attr('src', urlDaImagem);

No evento de click.

O ideal era quando o DOM da página carregar armazenar todas as referências das imagens dentro da div owl-carousel-galeria em um array e então mudar a imagem no next e prev do img-main ao clicar nos respectivos eventos.

Tipo assim.

$('.seta-direita').on(clickDeviceEvent, function(){
    $('.img-main').attr('src', refsImgs[indexAtual]);
});

Onde refsImgs são todas URLs das imagens e indexAtual uma variável global armazenando o index atual do seu carrossel.

Fonte Link
Erick Gallani
  • 1,6mil
  • 1
  • 9
  • 16

Diego.

Imagino que o problema seja o seguinte.

Fazendo isso

var imgAtual = $('.img-main').attr('src');

Você está pegando o source da imagem sendo exibida e atribuindo ela a uma variável e ponto final, mais nada.

Na verdade você tem que alterar o source da imagem principal, fazendo assim.

$('.img-main').attr('src', urlDaImagem);

No evento de click.

Infelizmente sem mais informações sobre qual componente está utilizando não da para ajudar muito mais do que isso.