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
i can only add 1 image to design 1 and design 2
@Natalie May I see your website? I can adjust it for you
@Chitti I just fix the buttons
@Laura I just fix the buttons. This is not swipeable with mobile, sorry
@Jagan If we are hiding the controls, how do you manage on controlling the image?
Thank you so much for this! Is there a way that I can have my entire image show? I’m seeing that they get slightly cut off when I insert the images regardless of what slide design I use. I’d love to use the normal design, but it doesn’t show the complete image.
Thanks, looks awesome, Button is not clickable on every slideshow
i want to ask when i add the image its not showing the image in full. how can i auto resize the image for the slideshow