Olá, Estou utilizando um Flexslider para fazer a listagem de imagens da página, porém gostaria de saber se há a opção de listar as imagens do carousel verticalmente, no momento, elas estão passando pela horizontal.
Segue o que eu necessito fazer:
Pode perceber que se eu passar as imagens menores pela seta, elas devem rolar verticalmente.
Porém quando utilizo o flex, ele lista as imagens menores horizontalmente, segue imagem:
Alguém já precisou fazer isto ou tem alguma dica de como posso fazer para as imagens menores ficarem com limitador de duas e aumentar para baixo ao invés de para os lados?
Segue link do script que estou utilizando:
http://flexslider.woothemes.com/thumbnail-slider.html
Segue código:
vm.flex_interna = function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
direction: "vertical",
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
}
vm.flex_interna();
Html:
<div class="flex_conteudo">
<div class="col-lg-6">
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="app/template/img/conteudo.png" />
</li>
<li>
<img src="app/template/img/conteudo.png" />
</li>
<li>
<img src="app/template/img/conteudo.png" />
</li>
<li>
<img src="app/template/img/conteudo.png" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div>
<div class="col-lg-6">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="app/template/img/conteudo.png" />
</li>
<li>
<img src="app/template/img/conteudo.png" />
</li>
<li>
<img src="app/template/img/conteudo.png" />
</li>
<li>
<img src="app/template/img/conteudo.png" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div>
</div>