Compatibilidade: Compatível com todos os temas do Shopify.
As imagens são muito importantes em um site. Apresentar as imagens de forma correta e única também é fundamental para causar uma boa impressão aos clientes.
Você pode verificar a loja de demonstração aqui . Senha: made4uo
Criei diversas galerias de imagens que você pode gostar, veja a seguir:
O que você está comprando:
- Carrossel de imagens que pode ser rolado horizontalmente usando a roda do mouse
- Mostrar/ocultar botão anterior e próximo
- Capaz de deslizar no celular
- Dica adicionada para ajudar o cliente a navegar/usar a seção
- Faça upload de várias imagens (isso pode afetar o tempo de carregamento)
- Aplique filtros de imagem a todas as imagens, até mesmo à imagem invertida
- Funciona em qualquer proporção de imagem
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em nosso site
- Nosso código é compatível com dispositivos móveis
Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.
Para iniciar:
1. Vá para loja Admin Shopify > Temas > Ações > Editar código
2. Na pasta Seção, crie uma nova seção. Você pode nomear o que quiser.
3. Substitua o código padrão pelo código abaixo. Certifique-se de SALVAR.
< div estilo = " preenchimento superior: {{ section.settings.padding_top | append: " px " }} ; preenchimento inferior: {{ section.settings.padding_bottom | append: " px " }} ; --carousel-image-opacity: {{ section.settings.carousel_opacity }} ; estouro: oculto; " > < { { seção. configurações . header_size } } style = "text-align: {{ section.settings.heading_alignment }} ; preenchimento: 0 5rem;" > { { - seção. configurações . cabeçalho - } } </ { { seção. configurações . tamanho_título } } > < carrossel - imagem > { % se seção. configurações . show_tooltip -% } < pequeno > ⬄ </ pequeno > { %- fim se % } < ul class = "carousel-image--container" > < li class = "carousel-image--wrapper filler-image" >< img </ li > { % para bloco na seção. blocos % } < li class = "carousel-image--wrapper {% if forloop.first %} escala-imagem {% endif %} " dados - slide = " {{ forloop.index | plus: 1 }} " { % a menos que bloco. configurações . filtro_de_imagem == 'nenhum' % } estilo = " --carousel-filter: {{ block.settings.image_filter}} ( {{ block.settings.filter_value | append: '%' }} ); {% if block.settings.apply_second %} --carousel-filter-second: {{ block.settings.image_filter}} ( {{ block.settings.filter_value | append: '%' }} ); {% endif %} " { % sem fim % } > { { bloquear. configurações . imagem | URL_da_imagem : largura : 1500 | imagem_tag : largura : bloco. configurações . imagem . largura , altura : bloco. configurações . imagem . altura , tamanhos : '(largura mínima: 750px) 50vw, 100vw' , larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' , alt : bloquear. configurações . imagem . alternativo | escapar } } { { bloquear. configurações . imagem | URL_da_imagem : largura : 1500 | imagem_tag : largura : bloco. configurações . imagem . largura , altura : bloco. configurações . imagem . altura , tamanhos : '(largura mínima: 750px) 50vw, 100vw' , larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' , alt : bloquear. configurações . imagem . alt , classe : bloco. eu ia | escapar } } </ li > { % fim para % } < li class = "carousel-image--wrapper filler-image" >< img </ li > </ul> _ < div class = "carrossel--clicked-image-container" style = "display: none; background: {{ section.settings.clicked_color }} " > { % para bloco na seção. blocos % } < div class = "carrossel--imagem clicada {{ block.settings.apply_second }} " dados - imagem = " {{ forloop.index | plus: 1 }} " { % se bloco. configurações . aplicar_segundo % } estilo = " --carousel-filter-second: {{ block.settings.image_filter}} ( {{ block.settings.filter_value | append: '%' }} ); " { % fim se % } > < botão class = "carousel--close-btn" dados - btn = " {{ forloop.index | plus: 1 }} " > < svg xmlns = "http://www.w3.org/2000/svg" aria - oculto = "verdadeiro" focalizável = "falso" role = "apresentação" preencher = "nenhum" viewBox = "0 0 18 17" > < caminho d = "M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.4 16a. 5,5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill = "currentColor" > </svg> _ </ botão > { { bloquear. configurações . imagem | URL_da_imagem : largura : 1500 | imagem_tag : largura : bloco. configurações . imagem . largura , altura : bloco. configurações . imagem . altura , tamanhos : '(largura mínima: 750px) 50vw, 100vw' , larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' , alt : bloquear. configurações . imagem . alternativo | escapar } } </div> _ _ { % fim para % } </div> _ _ < div class = "botão--container {{ section.settings.show_buttons }} " > < nome do botão = "anterior" class = "botão btn" desativado >< span > ⮞ </ span > PREV </ botão > < nome do botão = "próximo" class = "botão btn" > PRÓXIMO < span > ⮞ </ span </ botão > </div> _ _ </ carrossel - imagem > </div> _ _ <estilo> _ carrossel - imagem { posição : relativa ; } carrossel - imagem pequena { exibição : flexível ; posição : absoluta ; topo : 1rem ; direita : 5rem ; preenchimento : 0 1rem ; escala : 4 ; altura : 1rem ; largura : 2rem ; opacidade : 0,5 ; plano de fundo : #9a9a9a; cor : #f5f6f7; alinhar - itens : centro ; justificar - conteúdo : centro ; índice z : 99 ; } . carrossel - imagem - contêiner { posição : relativa ; exibição : flexível ; flex - wrap : nowrap ; largura : 100vw ; altura : 70vh ; flexível : 1 ; estouro -x : automático ; scroll - snap - type : x obrigatório ; comportamento de rolagem : suave ; rolagem - preenchimento - esquerda : 0 ; - webkit - overflow - rolagem : toque ; alinhar - itens : flex - start ; preenchimento : 0 ; transição : todos 0,2s lineares 0,2s ; } . carrossel - imagem - contêiner ::- webkit - barra de rolagem { altura : 0 ; largura : 0 ; Mostrar nenhum ; } rua. carrossel - imagem -- container > li { estilo de lista : nenhum ; -webkit - user -arrastar : nenhum ; seleção de usuário : nenhum ; } . carrossel - imagem -- wrapper { posição : relativa ; exibição : flexível ; flex - direction : coluna ; largura : conteúdo máximo ; máx - largura : 100 %; scroll - snap - align : center ; flex - encolher : 0 ; alinhar - itens : centro ; margem - topo : 10vh ; preenchimento : 0 0,5rem ; transição : todos 0,2s lineares 0,2s ; } . carrossel - imagem - wrapper. preenchimento - imagem { opacidade : 0 ; } . carrossel - imagem - wrapper. preenchimento - imagem img { proporção de aspecto : 1 ; } . carrossel - imagem -- container img { largura : automático ; exibição : bloco ; altura : 35vh ; ajuste de objeto : contém ; transição : todos 0,2s lineares 0,2s ; -webkit - user -arrastar : nenhum ; seleção de usuário : nenhum ; } . carousel - image --container : not ( .filler - image ) img : first - child { filtro : var ( -filtro - carrossel ) ; cursor : ponteiro ; fundo - cor : #f3f3f3; } . carrossel - imagem - wrapper. escala - imagem { largura : conteúdo máximo ; altura : automático ; alinhar - self : flex - start ; margem - topo : 0 ; } . carrossel - imagem - wrapper. escala - imagem img { altura : 50vh ; } . carousel - image --wrapper > img : nth - child ( 2 ) { -webkit - transform : scaleY ( -1 ) ; transformação : escalaY ( -1 ) ; opacidade : var ( -carousel - image - opacity ) ; posição : absoluta ; Os 100 melhores %; filtro : var ( -carousel - filtro - segundo ) ; } . botão --contêiner { Mostrar nenhum ; justificar - conteúdo : centro ; alinhar - itens : centro ; lacuna : 2rem ; margem inferior : 1rem ; } . botão - contêiner. btn_all_size { exibição : flexível ; } . botão - contêiner. botão . btn { exibição : flexível ; justificar - conteúdo : espaço ao redor ; lacuna : 0,5rem ; preenchimento : 0px 3rem ; largura mínima : 5rem ; } . botão - botão do contêiner : primeiro - filho > span { transformar : girar ( 180 graus ) ; } . carrossel -- clicado - imagem - contêiner { justificar - conteúdo : centro ; alinhar - itens : centro ; posição : fixa ; topo : 0 ; esquerda : 0 ; largura : 100 %; altura : 100 %; índice z : 10 ; } . carrossel -- clicado - imagem { Mostrar nenhum ; posição : relativa ; largura : conteúdo máximo ; altura : 35vw ; alinhar - itens : centro ; justificar - conteúdo : centro ; } . carrossel -- clicado - imagem > img { largura : automático ; altura : 100 %; fundo - cor : #f3f3f3; filtro : var ( -carousel - filtro - segundo ) ; -webkit - box - shadow : 0 10px 25px rgb ( 0 0 0 / 50 % ) ; -moz - box - shadow : 0 10px 25px rgba ( 0 , 0 , 0 , 0,5 ) ; box - shadow : 0 10px 25px rgb ( 0 0 0 / 50 % ) ; } . carrossel – imagem clicada. carrossel -- fechar - btn { posição : absoluta ; preenchimento : 0,5rem 0,4rem ; superior : - 10px ; direita : - 10px ; largura : 30px ; proporção de aspecto : 1 ; borda - raio : 50 %; filtro : tons de cinza ( 1 ) ; borda : 2px sólida ; exibição : flexível ; alinhar - itens : centro ; justificar - conteúdo : centro ; índice z : 1 ; } . carrossel – imagem clicada. carrossel -- close - btn : hover { filtro : inverter ( 1 ) ; } . carrossel – imagem clicada. carrossel -- fechar - btn > svg { largura : 15px ; acidente vascular cerebral : #000; largura do traço : 2px ; } . carrossel - imagem clicada. clicou -- img { exibição : bloco ; } Tela @media somente e ( largura máxima : 750px ) { . carrossel - imagem - contêiner { altura : 45vh ; } . carrossel - imagem -- container img { altura : 25vh ; } . carrossel - imagem -- wrapper { margem - topo : 5vh ; } . carrossel - imagem - wrapper. escala - imagem img { altura : 35vh ; } . botão - contêiner. btn_mobile_only { exibição : flexível ; } . carrossel -- clicado - imagem { largura : 75 %; altura : automático ; } . carrossel -- clicado - imagem > img { largura : 100 %; altura : 100 %; } } </ estilo > { % esquema % } { "name" : "Imagens do carrossel" , "configurações" : [ { "tipo" : "cabeçalho" , "content" : "Título" } , { "tipo" : "texto" , "id" : "título" , "rótulo" : "Título" , "default" : "Imagem de carrossel incrível" } , { "tipo" : "selecionar" , "id" : "heading_size" , "opções" : [ { "valor" : "h1" , "rótulo" : "grande" } , { "valor" : "h2" , "rótulo" : "médio" } , { "valor" : "h3" , "rótulo" : "pequeno" } ] , "padrão" : "h1" , "label" : "Tamanho do título" , "info" : "O estilo do tamanho depende do tema atual" } , { "tipo" : "selecionar" , "id" : "heading_alignment" , "opções" : [ { "valor" : "centro" , "rótulo" : "centro" } , { "valor" : "esquerda" , "rótulo" : "esquerda" } , { "valor" : "certo" , "rótulo" : "certo" } ] , "padrão" : "centro" , "label" : "Alinhamento do título" } , { "tipo" : "cabeçalho" , "content" : "Botões" } , { "tipo" : "selecionar" , "id" : "show_buttons" , "opções" : [ { "valor" : "btn_all_size" , "label" : "Todos os dispositivos" } , { "valor" : "btn_mobile_only" , "label" : "Somente celular" } , { "valor" : "btn_hide_all" , "label" : "Ocultar para todos os dispositivos" } ] , "padrão" : "btn_all_size" , "label" : "Mostrar botões" , "info" : "O estilo do botão pode ser baseado nas configurações atuais de estilo do tema" } , { "tipo" : "caixa de seleção" , "id" : "show_tooltip" , "padrão" : falso , "label" : "Mostrar seta de dica de ferramenta" } , { "tipo" : "intervalo" , "id" : "carousel_opacity" , "min" : 0 , "máximo" : 1 , "passo" : 0,1 , "label" : "Opacidade da imagem invertida no carrossel" , "padrão" : 0,3 } , { "tipo" : "cabeçalho" , "content" : "Imagem clicada" } , { "tipo" : "cor" , "id" : "cor_clicada" , "default" : "#FFFFFF" , "label" : "Cor de fundo do contêiner da imagem clicada" } , { "tipo" : "cabeçalho" , "content" : "Preenchimento" } , { "tipo" : "intervalo" , "id" : "padding_top" , "min" : 0 , "máximo" : 100 , "passo" : 5 , "unidade" : "px" , "label" : "Preenchimento superior" , "padrão" : 0 } , { "tipo" : "intervalo" , "id" : "padding_bottom" , "min" : 0 , "máximo" : 100 , "passo" : 5 , "unidade" : "px" , "label" : "Preenchimento inferior" , "padrão" : 0 } ] , "blocos" : [ { "nome" : "imagem" , "tipo" : "imagem" , "configurações" : [ { "type" : "image_picker" , "id" : "imagem" , "rótulo" : "Imagem" } , { "tipo" : "selecionar" , "id" : "filtro_imagem" , "opções" : [ { "valor" : "brilho" , "rótulo" : "Brilho" } , { "valor" : "contraste" , "rótulo" : "Contraste" } , { "valor" : "escala de cinza" , "label" : "Escala de cinza" } , { "valor" : "inverter" , "rótulo" : "Inverter" } , { "valor" : "opacidade" , "rótulo" : "Opacidade" } , { "valor" : "saturar" , "label" : "Saturar" } , { "valor" : "sépia" , "rótulo" : "Sépia" } , { "valor" : "nenhum" , "rótulo" : "Nenhum" } ] , "padrão" : "nenhum" , "label" : "Filtro de imagem" , "info" : "Escolha o filtro e atribua o valor nas configurações abaixo" } , { "tipo" : "intervalo" , "id" : "filtro_valor" , "min" : 0 , "máximo" : 100 , "unidade" : " %" , " passo 1 , "label" : "Valor do filtro" , "padrão" : 0 } , { "tipo" : "caixa de seleção" , "id" : "aplicar_segundo" , "padrão" : falso , "label" : "Aplicar filtro à imagem invertida e à imagem clicada" } ] } ] , "predefinições" : [ { "name" : "Imagens do carrossel" } ] } { % termina o esquema % } |
4. Precisamos adicionar o código javascript, vá para a pasta Asset. Encontre global.js ou theme.js, ou seu arquivo javascript principal, dependendo do tema.
5. Adicione o código abaixo no final do arquivo e clique em SALVAR.
classe CarouselImage estende HTMLElement { construtor ( ) { super ( ) ; esse . eu = isso . querySelector ( 'botão[nome="anterior"]' ) ; esse . t = isso . querySelector ( 'botão[nome="próximo"]' ) ; esse . h = isso . querySelector ( "ul" ) ; esse . imagens = isto . querySelectorAll ( "li" ) ; esse . eu = isso . querySelector ( ".carousel--clicked-image-container" ) ; esse . o = isso . querySelector ( ".escala-imagem" ) ; esse . m = isso . querySelector ( ".clicado--img" ) ; esse . g = isso . querySelectorAll ( ".carousel--close-btn" ) ; esse . addEventListener ( "mousewheel" , this .u . bind ( this ) , { passivo : false } ) ; esse . addEventListener ( " DOMMouseScroll " , this.u.bind ( this ) , { passivo : falso , } ) ; esse . addEventListener ( " roda" , this.u.bind ( this ) , { passivo : falso } ) ; se ( este.i ) { _ esse . eu . addEventListener ( " clique " , isto.k.ligar ( este ) ) ; esse . t . addEventListener ( " clique " , isto.k.ligar ( este ) ) ; } se ( este.l ) { _ esse . g . forEach ( ( i ) => i.addEventListener ( "clique" , isto.p.ligar ( este ) ) ) ) ; documento. addEventListener ( "keydown" , this . v . bind ( this ) ) ; } esse . imagens . forEach ( ( i ) => i.addEventListener ( "clique" , isto.I.ligar ( este ) ) ) ) ; const i = novo ResizeObserver ( ( i ) => this.init ( ) ) ; eu. observe ( este.h ) ; _ esse . eu = 2 ; esse . iniciar ( ) ; } iniciar ( ) { const i = tela. largura / 2 ; consts = isto . imagens [ 1 ] . largura do cliente / 2 ; const t = isto . imagens [ isto . imagens . comprimento - 1 ] . largura do cliente / 2 ; const h = eu - s ; const e = i - t ; esse . M = Matemática. redondo ( i - s ) ; esse . imagens [ 0 ] . querySelector ( "img" ) . estilo . largura = h + "px" ; esse . imagens [ isto . imagens . comprimento - 1 ] . querySelector ( "img" ) . estilo . largura = e + "px" ; esse . atualização ( este.L ) ; _ } atualizar ( eu ) { esse . m = isso . querySelector ( ".clicado--img" ) ; esse . o = isso . querySelector ( ".escala-imagem" ) ; esse . eu = eu ; } p ( eu ) { eu. preventDefault ( ) ; esse . eu . estilo . exibir = "nenhum" ; console. log ( "fechar" , ou seja, currentTarget ) ; esse . eu = eu. atualTarget . parentElement . conjunto de dados . C ; esse . A ( este.L ) ; _ } Eu ( eu ) { eu. preventDefault ( ) ; const s = eu. atualTarget . conjunto de dados . Ó ; if ( i. currentTarget . classList . contains ( "escala-imagem" ) ) { esse . eu . estilo . exibir = "flexível" ; esse . R ( s ) ; } outro { esse . Como ) ; _ } esse . atualização ( ões ) ; } v ( eu ) { const s = eu. chave ; seja t = isso . querySelector ( ".clicked--img" ) . conjunto de dados . C ; if ( s == "SetaDireita" ) { t < isso . imagens . comprimento - 1 ? t ++ : ( t = 2 ) ; } if ( s == "Seta para a Esquerda" ) { t > 2 ? t -- : ( t = este.imagens.comprimento - 1 ) ; } esse . R ( t ) ; } R ( eu ) { console. log ( "clique" ) ; esse . querySelectorAll ( ".carousel--imagem clicada" ) . forEach ( ( i ) => eu. lista de classes . remover ( "clicado--img" ) ) ; esse . querySelector ( ` [ dados - imagem = "${i}" ] ` ) . lista de classes . add ( "clicado--img" ) ; esse . atualizar ( eu ) ; } você ( eu ) { eu. preventDefault ( ) ; se ( ou seja, deltaY > 1 ) { if ( isto . L < este.imagens.comprimento - 1 ) isto . L ++; } outro { se ( isto . L > 2 ) isto . EU --; } esse . A ( este.L ) ; _ } k ( eu ) { eu. preventDefault ( ) ; if ( ou seja, currentTarget . name == "próximo" ) { if ( este . L < este . imagens . comprimento - 1 ) { esse . L ++; } } outro { se ( isto . L > 2 ) { esse . EU --; } } esse . A ( este.L ) ; _ } UMA ( eu ) { se ( este.i ) { _ eu == isso . imagens . comprimento - 1 ? ( isto . t . desabilitado = verdadeiro ) : ( este.t.desativado = falso ) ; _ _ eu == 2 ? ( isto.i.desativado = verdadeiro ) : ( este.i.desativado = falso ) ; _ _ _ _ } esse . imagens . forEach ( ( i ) => { eu. lista de classes . remover ( "escala-imagem" ) ; } ) ; consts = isto . querySelector ( ` [ data - slide = "${i}" ] ` ) ; se ( s ) { S. lista de classes . add ( "escala-imagem" ) ; const t = s. largura do cliente / 2 ; const h = isto . h . largura do cliente / 2 ; seja i = s. deslocamentoEsquerda + t - h ; se ( eu < 0 ) eu = 0 ; esse . h . scrollLeft = i ; } esse . atualizar ( eu ) ; } } elementos personalizados. define ( "carousel-image" , CarouselImage ) ; |
6. Adicione a seção usando o editor de temas. Encontre a seção "Imagens do carrossel".
É isso (",)
0 comentários