Como criar um banner fullpage flexslider

Para criar um banner fullpage com o componente flexslider (veja referências do plugin aqui)

1 - Crie um elemento de página do tipo HTML com o seguinte conteúdo:

 

 

<section id="slider" class="desktop">
<!--slider-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<!-- Place somewhere in the <body> of your page -->
<div id="slider-home" class="flexslider">
<ul class="slides">
<li class="banner-1">
<div class="limitador-tamanho">
<a href="[N2NVirtual VALOR_LINK_SLIDER_HOME_BANNER1]">
<img alt="[N2NVirtual VALOR_TITULO_MARKETPLACE]" src="[N2NVirtual VALOR_URL_MARKETPLACE]/geradorUrlImagem.html?url=[N2NVirtual VALOR_URL_SLIDER_HOME_BANNER1]" /></a>
</div>
</li>
<li class="banner-2">
<div class="limitador-tamanho">
<a href="[N2NVirtual VALOR_LINK_SLIDER_HOME_BANNER2]">
<img alt="[N2NVirtual VALOR_TITULO_MARKETPLACE]" src="[N2NVirtual VALOR_URL_MARKETPLACE]/geradorUrlImagem.html?url=[N2NVirtual VALOR_URL_SLIDER_HOME_BANNER2]" /></a>
</div>
</li>
<li class="banner-3">
<div class="limitador-tamanho">
<a href="[N2NVirtual VALOR_LINK_SLIDER_HOME_BANNER3]">
<img alt="[N2NVirtual VALOR_TITULO_MARKETPLACE]" src="[N2NVirtual VALOR_URL_MARKETPLACE]/geradorUrlImagem.html?url=[N2NVirtual VALOR_URL_SLIDER_HOME_BANNER3]" /></a>
</div>
</li>
</ul>
</div>

</div>
</div>
</div>
</section>
<!--/slider-->

<link href="https://lojas.n2nvirtual.com.br/scripts/woothemes-flexslider/css/shCore.min.css" rel="stylesheet" />
<link href="https://lojas.n2nvirtual.com.br/scripts/woothemes-flexslider/flexslider.min.css" rel="stylesheet" />
<style type="text/css">
.flex-caption .caption
{
padding: 1%;
float: none;
font-size: 14px;
line-height: 18px;
margin: 0 auto;
display: block;
}

.flex-caption
{
background: rgb(55,52,53);
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
color: #FFF;
float: left;
width: 100%;
}

.flex-direction-nav a:before
{
line-height: 1;
color: rgb(255,255,255);
text-shadow: 1px 3px 0 rgba(0,0,0,.75);
}

.flexslider .slides img
{
max-height: 550px;
}
</style>
<script>
// Can also be used with $(document).ready()
$(document).ready(function () {
$.cachedScript("https://lojas.n2nvirtual.com.br/scripts/woothemes-flexslider/jquery.flexslider.js").done(function (script, textStatus) {
$('#slider.desktop .flexslider').flexslider({
animation: "slide"
});
});
});
</script>

 

2 - Salve o registro

3 - Depois basta usar a tag N2N Virtual gerada para esse elemento de página e instalar ele na página desejada.

 

Obs: Lembrando que a criação de elementos de página só é permitida a partir do plano professional.

 Tags: agência, dicas

 

Tem mais dúvidas? Envie uma solicitação

0 Comentários

Por favor, entre para comentar.
Powered by Zendesk