Hello, I'm using a Flexslider to do the image listing of the page, but I would like to know if there is an option to list the carousel images vertically at the moment they are going horizontally.
Here's what I need to do:
YoucanseethatifImovethesmallerimagesbythearrow,theyshouldscrollvertically.
ButwhenIuseflex,itliststhesmallerimageshorizontally,followingimage:
HasanyoneeverhadtodothisordoyouhaveanytipsonhowIcandoforthesmallerimagestohaveatwo-limiterandraisedownratherthansideways?
HereisthescriptlinkI'musing:
link
Follow the code below:
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>