1
Hello, I’m using a Flexslider to do the listing of page images, but I wonder if there is the option to list the Carousel images vertically, at the moment, they are going through the horizontal.
Follow what I need to do:
You can see that if I run the smaller images through the arrow, they should scroll vertically.
But when I use flex, it lists the smaller images horizontally, follows image:
Has anyone ever needed to do this or has any hint as to how I can get smaller images to limit two and zoom down instead of sideways?
Follow the link of the script I’m using:
http://flexslider.woothemes.com/thumbnail-slider.html
Follows code:
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>
