Olá pessoal,
Estou pesquisando e vi que já foram abertos outros tópicos semelhantes a este.
Porém, ainda não foi solucionado.
Se algum membro tiver a solução via JS ou HTML para que possamos implementar, ajustes a parte é claro, em nossos sites seria ótimo.
Banners animados costumam chamar muito a atenção e dependendo do nicho faz total diferença.
Obs: Com isso conseguimos vencer a limitação de 500k do fullbanner da LI.
Claro que quanto maior o arquivo, maior o tempo de carregamento dele e em consequência maior lentidão ao carregar o seu site.
Um abraço a todos.
3 curtidas
@Mauricio_Pereira se conseguir me explica como devo fazer? Fiz um banner com Gif mas não funciona quando instalo no site.
1 curtida
Olá @MONICASOUZA estou na busca também… mas até o momento nada… acredito que a solução deva ser hospedar a imagem na LI mesmo e fazer um script para carregar as imagens a partir de lá…
Meu banner do mobile é assim porém não tenho acesso ao código porque é do tema.
1 curtida
@Mauricio_Pereira e @MONICASOUZA ,boa tarde. Tudo bem?
A @BeepDigital , possui este serviço disponível
https://integrando.se/servicos/implantacao/layout/banner-animado-em-gif-3517/
@BeepDigital , é com vcs. 
1 curtida
Obrigado pela força @NatielleAT !
Entre em contato conosco para tirar suas dúvidas e fazer orçamentos, de segunda à sexta, das 10:00 às 18:00. ----> WhatsApp: (11) 99317-6208.
1 curtida
Estamos juntos 
1 curtida
Consegue criar 3 mini banner’s em Gif pra mim e me passar a informação de como configurar no meu site? Caso sim vou entrar em contato no whatsapp e fechar negócio blz
2 curtidas
é possível sim, se tiver interesse envio meu número no privado para você
1 curtida
Tenho sim me chama no WhatsApp 31995990179 por gentileza
1 curtida
chamei lá. Obrigado.
Boa noite amigo, já criei os mini banner’s em Gif só estou preocupado de não me enviar os códigos porque infelizmente hoje em dia são tantas coisas na internet.
1 curtida
Rsrsrsrs… entendo… pessoal aqui conhece meu trabalho.
1 curtida
Eu tô no aguardo blz😀
1 curtida
Você não seguiu as orientações que passei no passo a passo. Colocou as imagens hospedadas e forma errada.
Antes de passar esse posicionamento aqui na plataforma verifique toda a informação por favor.
1 curtida
Amigo muito obrigado por tudo!
Esse foi o melhor investimento que eu fiz em termos do meu site😀
Agora vou editar o Gif feminino porque ficou com muita imagem kkk
Obrigado pela paciência, transparência e educação. Que Deus continue te abençoando sempre 
Pra quem tem alguma dúvida da uma olhadinha no meu site pra ver como está ficando as alterações;
https://www.grifestorevariedades.com.br
2 curtidas
Ola, descobri duas formas de fazer, tanto com Gif e com Video (que roda bem melhor).
Primeiramente você terá que enviar tanto o teu GIF quanto o teu Video pra uma plataforma. No meu caso, o gif era maior que 5mb e hospedei em um site de gifs, mas o problema é que ele fica lá por apenas 1 ano, ai tem que reenviar e atualizar o caminho dele no teu codigo JavaScript.
Pra hospedar o GIF: https://gifyu.com/
Pra hospedar o Video MP4: https://cloudinary.com/
Os dois são bem simples de usar, só fazer um login ou criar conta e clicar pra enviar o arquivo.
Pra fazer o GIF é bem simples, apenas inserir em JavaScript e ele já se ajeita automaticamente. Já no vídeo é mais complexo, precisei fazer um código CSS pra ajustar no mobile, pois não estava se ajustando, ou muitas vezes ele sumia.
Antes de tudo você terá que criar o banner na pagina de criação de banner da plataforma, importante você identificar um nome pra esse banner e depois salve esse nome em algum lugar porque você ira precisar desse nome depois no codigo. Sugiro colocar algo sem espaços e com hífen pra ficar melhor na hora de copiar e não copiar espaços em branco. Sugiro algo como: FULL-BANNER-GIF
MP4
Vai em: PERSONALIZE SUA LOJA >> INCLUIR CODIGO HTML >> ADICIONAR CODIGO (Canto direiro em cima)
Nesse codigo você preenche assim:
Descrição: FULL BANNER MP4 (esse é apenas pra voce saber do que se trata o codigo pra quando precisar alterar)
Local de Publicação: RODAPÉ
Página de Publicação: PAGINA INICIAL - HOME
Tipo: JAVASCRIPT
Conteúdo:
$(document).ready(function(){
$('.banners-full .slick-slide').each(function(index, elemento){
let slideAlt = $(elemento).find('img').attr('alt');
if(slideAlt && slideAlt.indexOf('NOME-EXATO-DO-SEU-BANNER') !== -1){
$(elemento).find('img').replaceWith(`
<div class="banner-video-container">
<video class="banner-video" autoplay muted loop playsinline>
<source src="https://LINK-EXATO-DO-SEU-VIDEO.mp4" type="video/mp4">
Seu navegador não suporta vídeos.
</video>
</div>
`);
}
});
});
Perceba que eu deixei especificado o local que precisa fazer a troca, ‘NOME-EXATO-DO-SEU-BANNER’, aqui você irá alterar somente as palavras, qualquer aspas, parenteses ou pontos devem ser mantidos. Ou seja, se você salvou com o nome que eu sugeri, ele ficará assim nessa parte do codigo: …indexOf(‘FULL-BANNER-GIF’) !==…
A mesma coisa acontecerá no link ali onde está …‘src’, “https://LINK-EXATO-DO-SEU-VIDEO.mp4”… Substitua somente o link mantendo as aspas inicial e final.
Outra coisa que precisa conferir, é como está o nome do container do Full banner no seu tema, isso significa que se ele não funcionar, você clica com o botão direito em inspecionar e envia um foto do codigo inteiro que aparece no inspecionar e o codigo que mencionei pro chat GPT corrigir o local correto, no meu caso está assim la no começo: … $(‘.banners-full .slick-slide’).each…
Pra acrescentar o codigo CSS
Vai em: PERSONALIZE SUA LOJA >> EDITAR CSS
Se ja tiver algum codigo nessa pagina, apenas dê alguns Enter pra ele iniciar o codigo bem abaixo e não atrapalhar os que ja contém, pois não podemos excluir nada do codigo anterior pra não danificar nada na tua loja.
Abaixo o codigo CSS:
.banner-video-container {
width: 100%;
overflow: hidden;
position: relative;
}
/* Para mobile: aplica aspect-ratio */
@media only screen and (max-width: 1180px) {
.banner-video-container {
aspect-ratio: 2.33 / 1;
}
}
/* Banner video ocupa tudo e corta excesso */
.banner-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
}
Aqui no CSS a principio não precisa mudar nada, apenas se a resolução não estiver correta no mobile, você ajusta em aspect-ratio: 2,33 / 1; Onde precisará colocar algum outro valor de proporção referente ao seu site se comporta no Mobile. É só jogar esse codigo no Chat GPT e pedir pra ele fazer o corte que melhor corresponde ao eu site.
Agora se você quer fazer ele com GIF, o caminho é bem semelhante, apenas NÃO irá acrescentar o codigo de CSS.
GIF:
Vai em: PERSONALIZE SUA LOJA >> INCLUIR CODIGO HTML >> ADICIONAR CODIGO (Canto direiro em cima)
Nesse codigo você preenche assim:
Descrição: FULL BANNER GIF (esse é apenas pra voce saber do que se trata o codigo pra quando precisar alterar)
Local de Publicação: RODAPÉ
Página de Publicação: PAGINA INICIAL - HOME
Tipo: JAVASCRIPT
Conteúdo:
$(document).ready(function(){
$('.banners-full .slick-slide').each(function(index, elemento){
let slideAlt = $(elemento).find('img').attr('alt');
if(slideAlt && slideAlt.indexOf('NOME-EXATO-DO-SEU-BANNER') !== -1){
$(elemento).find('img').attr('src', 'https://LINK-EXATO-DO-SEU-BANNER.gif');
}
});
});
Perceba que eu deixei especificado o local que precisa fazer a troca, ‘NOME-EXATO-DO-SEU-BANNER’, aqui você irá alterar somente as palavras, qualquer aspas, parenteses ou pontos devem ser mantidos. Ou seja, se você salvou com o nome que eu sugeri, ele ficará assim nessa parte do codigo: …indexOf(‘FULL-BANNER-GIF’) !==…
A mesma coisa acontecerá no link ali onde está …‘src’, ‘https://LINK-EXATO-DO-SEU-BANNER.gif’);… Substitua somente o link mantendo as aspas inicial e final.
Outra coisa que precisa conferir, é como está o nome do container do Full banner no seu tema, isso significa que se ele não funcionar, você clica com o botão direito em inspecionar e envia um foto do codigo inteiro que aparece no inspecionar e o codigo que mencionei pro chat GPT corrigir o local correto, no meu caso está assim la no começo: … $(‘.banners-full .slick-slide’).each…
Fiz tudo fuçando sozinho e com a ajuda do chat GPT.
No caso do CSS já está em 1080px que pode ser ajustado e visualizado em tablet, pq se colocar apenas 768, ele sumia o Banner.