Add automatic slider / carousel

Controle deslizante de imagem do produto para o tema Shopify Dawn

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: todos os temas do Shopify (o estilo pode variar)

Consegui escrever um controle deslizante/carrossel de reprodução automática usando rolagem. Isso funciona com a maioria dos temas do Shopify (funciona melhor no tema Dawn e Debut).

Neste tutorial, estamos criando um controle deslizante ou carrossel para um cartão ou cartão de produto. Eu forneci uma opção para escolher entre os dois. Também incluí uma opção de reprodução automática, é claro. Você pode escolher de 3 a 7 produtos por slide ou de 3 a 5 cartões por slide.

Também adicionei opções para pontos e contador de números. Sim, os contadores funcionam.

Verifique a loja DEMO aqui💻 . Senha: made4uo

O que você está comprando:

  • Controle deslizante automático para coleta

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

Para iniciar:

1. Vá para loja Admin Shopify > Temas > Ações > Editar código
2. Na pasta Seção, crie uma nova seção, nomeie-a como "carrossel universal" e cole o código abaixo.

3. Precisamos do arquivo que contém o javascript. Na pasta de ativos, abra o arquivo “theme.js” ou “global.js” e cole o código abaixo.

É isso. Deixe-me saber se você tem perguntas (",)

Atualizado em 18/03/22: você pode adicionar várias desta seção em uma página.

Copied!
Voltar para o blogue

1 comentário

Thanks for great video. How can I set minimum card number to 1 ?

Tom

Deixe um comentário