Baner tarja carrosel | carrosel de imagens

Layout
4

Remover Esse código que vc colocou em CSS.

/*baner tarja no mobile*/
body > div.conteiner-principal > div.secao-banners > div > div.row-fluid.banner.hidden-phone {
    display: block !important;
}

Adicionar um HTML e colocar o código abaixo.

image

<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/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({
    animation: "slide"
});
</script>

image
image399×618 47.1 KB

PS: Não está automatizado, se colocar ou remover algum mini banner, precisa mudar o código.