Compatibilidade: Compatível com a maioria dos temas do Shopify, do Debut ao Shopify 3.0.
Crie uma apresentação de slides sem necessidade de aplicativo, assinatura e experiência em codificação.
Eu sei que a maioria dos temas do Shopify tem uma espécie de apresentação de slides, mas não estamos criando apenas uma espécie de apresentação de slides. A apresentação de slides tem um total de 11 estilos diferentes que você pode aplicar (não contei o design 2, pois é apenas o oposto do design 1). Está tendo problemas com imagens muito claras ou muito escuras? Eu adicionei filtros. Eu recomendo brincar com os filtros.
Além disso, adicionei um vídeo que você pode enviar do seu disco rígido ou do YouTube.
Isso funciona com o tema Debut e Dawn com certeza, mas como escrevi o código com nomes de classe exclusivos e com código rígido (o que significa que não pode ser facilmente alterado), isso deve funcionar na maioria dos temas do shopify.
Apenas para informar, componentes complexos vêm com códigos longos. Tentei encurtar o código o máximo que pude.
Confira a loja DEMO aqui 💻 . Senha: made4uo
NOTA: Lembre-se de usar imagens de paisagem tanto quanto possível ou usar os designs 1 e 2 para imagens de retrato para evitar que as imagens sejam cortadas. As imagens devem ter os mesmos tamanhos possíveis.
O que você está comprando:
- 11 designs de slides diferentes
- Adicionados filtros para facilitar o ajuste das imagens
- Use vídeos no slide
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 sua loja online > Temas > Ações > Editar código
2. Vá para a pasta Seção e crie uma seção, vamos chamá-la de "apresentação de slides personalizada"
3. Na nova seção, cole o código abaixo e clique em SALVAR
Observe que cada design tem uma duração de animação diferente (veja as informações abaixo).
Requisito de duração da animação
.design1: 1s;
.design2: 1s;
.design3: 2s;
.design4: 3s;
.design5: 3s;
.design6: 3s;
.design7: 3s;
.design8: 1s;
.design9: 1s;
.design10: 4s;
.design11: 3s;
.design12: depende da velocidade de reprodução automática
6. Por último, na pasta Asset, abra global.js ou pode ser theme.js para outros temas. Se você estiver usando um arquivo javascript minificado, cole-o no min.js que você está usando. Em seguida, cole o código abaixo.
Atualização 20/10/21: Fiz algumas alterações no código para que os botões apareçam com design minimalista. (veja a imagem abaixo como é)
Atualização 06/11/21: adicionei uma opção de largura total (no editor de tema personalizado, clique em "Apresentação de slides personalizada" à sua esquerda. Você deve ter as configurações de largura total e intervalo lá. (veja a imagem abaixo ).Eu também fixo os pontos, então quando você clica neles, o índice passa para os botões e se torna o ponto atual.
ATUALIZAÇÃO 12/02/22: Fiz algumas atualizações importantes para ter várias apresentações de slides na mesma página. Tenho as opções de cores disponíveis no editor de temas. Você também pode ter a opção de ocultar os controles. Tornou-o compatível com dispositivos móveis.
Deixe-me saber se você tem perguntas. Aproveitar! (",)
Copied!
27 comentários
Hi @TATUM RONCO,
I think you are talking about design 1 and 2. There are multiple designs available. I don’t recommend changing the height unless necessary. Be reminded that your images are for both desktop and mobile, which does not have the same aspect ratio.
Hello, thank you for this. It looks great but just had a few questions:
- The first photo is full width but the next photos are only in a column to the right. How can I fix that?
- Where in the code can I change the height of the slider? I like it full width but want it shorter height wise. Thank you
My bad. Just change one word. See updates
Thank you for great video, but buttons don’t work. Could you give me some advice?
Thank you so much for this!
The play button (when autoplay is enabled) doesn’t work!