Sim, é possível, com o código acima postado, consegue fazer isso, um novo carrossel de imagens.
@Leonardo_Vicentini_F Muito top!!
Aqui praticamente deu tudo certo.
Como faz para ficar automatizado, ir mudando as imagens?
aqui pelo teste que fiz no seu site ja está mudando
mas talvez mude essas configurações:
$('.flexslider2').flexslider({
easing: "swing",
animation: "slide",
slideshowSpeed: 500,
animationSpeed: 600,
startAt: 0,
initDelay: 0
});
1 curtida
Muito obrigado Leonardo!
1 curtida
Mano, pode me ajudar mais uma vez?
Instalei o Banner Mobile (html q veio no tema), aí o banner tarja fica na parte de cima e emprençado.
Como faço para ele ficar abaixo do banner mobile e com o espaçamento normal?
Também tem um bug quando abre no celular, fica tudo em branco nessa parte do banner, como se estivesse travado ou demorando carregar… não aparece enquanto não rolar com o dedo na tela…
pelo menos aqui no iphone está assim.
o site é: ervadocegranel.com.br
tente com esse trecho js (alem do css)
$('.secao-banners').append(`
<div class="row-fluid banner">
<div class="flexslider2">
<ul class="slides">
<li>
<img src="https://cdn.awsli.com.br/1140x1448/1234/1234901/banner/1394a20774.png" alt="frete gratis acima de xx">
</li>
<li>
<img src="https://cdn.awsli.com.br/1140x1448/1234/1234901/banner/e8b983008d.png" alt="Compra segura">
</li>
<li>
<img src="https://cdn.awsli.com.br/1140x1448/1234/1234901/banner/423ac84656.png" alt="parcelamento no cartão">
</li>
<li>
<img src="https://cdn.awsli.com.br/1140x1448/1234/1234901/banner/0f619e94c2.png" alt="desconto no boleto">
</li>
</ul>
</div>
</div>
`);
$('.flexslider2').flexslider({
easing: "swing",
animation: "slide",
slideshowSpeed: 1000,
animationSpeed: 1000,
startAt: 0,
initDelay: 0
});
Aqui ainda continua em cima e travando no iphone.
Será oq fiz de errado?
Esse cógigo é todo colocado no HTML ou tem algum CSS pra colocar?
tem os dois la em cima
segue completo, html
<style type="text/css">
.flexslider2 {
display: none;
}
@media only screen and (max-width: 767px){
.flexslider2 {
display: block;
}
}
.flexslider2 div ul.slides {
text-align: center;
}
</style">
<script type="text/javascript">
$(function() {
$('.secao-banners').append(`
<div class="row-fluid banner">
<div class="flexslider2">
<ul class="slides">
<li>
<img src="https://cdn.awsli.com.br/1140x1448/1234/1234901/banner/1394a20774.png" alt="frete gratis acima de xx">
</li>
<li>
<img src="https://cdn.awsli.com.br/1140x1448/1234/1234901/banner/e8b983008d.png" alt="Compra segura">
</li>
<li>
<img src="https://cdn.awsli.com.br/1140x1448/1234/1234901/banner/423ac84656.png" alt="parcelamento no cartão">
</li>
<li>
<img src="https://cdn.awsli.com.br/1140x1448/1234/1234901/banner/0f619e94c2.png" alt="desconto no boleto">
</li>
</ul>
</div>
</div>
`);
$('.flexslider2').flexslider({
easing: "swing",
animation: "slide",
slideshowSpeed: 1000,
animationSpeed: 1000,
startAt: 0,
initDelay: 0
});
})
</script>
1 curtida
Ainda está com o mesmo B.O… Não carrega de primeira no iPhone (no pc fica norma - F12) e ainda está na parte de cima… Segue print.
Deixe o codigo ativo assim consigo ver
eu consigo jogar link direcionado dentro dessa imagem na tarja carrossel?
Sim, vc pode configurar qualquer url
@Leonardo_Vicentini_F Vc poderia me ajudar? O Paulo me passou esse código para ter o banner tarja no mobile e disse que foi vc que passou para ele. Mas não estou conseguindo tirar as imagens dele( vieram no código) e colocar as minhas.
www.laurelmoda.com.br
Não entendi, qual código?
.flexslider2 {
display: none;
}
@media only screen and (max-width: 767px){
.flexslider2 {
display: block;
}
}
.flexslider2 div ul.slides {
text-align: center;
}
É esse código. Porém não estou conseguindo trocar pelas minhas imagens.
mas isso é só o CSS, com certeza tem muito mais codigo para inserir, tipo CSS e JS
Bom dia,
Acho que e esse código…
@Laurel é só trocar o link das imagens
<style type="text/css">
.flexslider2 {
display: none;
}
@media only screen and (max-width: 767px){
.flexslider2 {
display: block;
}
}
.flexslider2 div ul.slides {
text-align: center;
}
</style>
<script type="text/javascript">
$('.secao-banners .conteiner').append(`
<div class="row-fluid banner">
<div class="flexslider2">
<ul class="slides">
<li>
<img src="https://cdn.awsli.com.br/2297/2297081/arquivos/4_20221228_124723_0003.png" alt="Texto alternativo para a imagem" >
</li>
<li>
<img src="https://cdn.awsli.com.br/2297/2297081/arquivos/3_20221228_124723_0002.png" alt="Texto alternativo para a imagem" >
</li>
<li>
<img src="https://cdn.awsli.com.br/2297/2297081/arquivos/1_20221228_124723_0000.png" alt="Texto alternativo para a imagem" >
</li>
<li>
<img src="https://cdn.awsli.com.br/2297/2297081/arquivos/2_20221228_124723_0001.png" alt="Texto alternativo para a imagem" >
</li>
</ul>
</div>
</div>
`);
$('.flexslider2').flexslider({
animation: "slide"
});
</script>
@Leonardo_Vicentini_F é esse que o Paulo enviou. Mas não sei como mudar esses links para trocar pelas minhas imagens 
Boa tarde, e só salvar a imagem que vc quer colocar na plataforma, e depois apagar o link e copiar o link da sua imagem.
1 curtida
Paulo, obrigado pela ajuda🙏
Sou analfabeta para tecnologia rsrsrs. Tem que desenhar para eu entender, mesmo.
Sei que é tempo que vc e o Leonardo desprendem para ajudar o pessoal aqui. Então, muito obrigado!
2 curtidas