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
Awesome, thank you so much ! There are just some small issues :
- the pause button (when autoplay is enabled) doesn’t work
- the arrows don’t work on mobile
- we can’t swipe left and right on mobile to see the previous and the next slide
The Full width option is great . Thanks for the update. How do I hide the controls buttons .. i mean if I dont want to display the arrows and dots?
Hi everyone,
Just updated the code and added a full-width.
Awesome work, Can we do this on full width ?
Yes very impressive and lot of options but I am having the same problem. cannot set the full width in CSS . The left side has some margin and it does not align