Menu
In my html file inside the body tags i added the code:
[CODE]<div class=”vertical-slider-container”>
<img src=”https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png” id=”prev” class=”vertical-slider-nav vertical-slider-nav-up” />
<div class=”slideshow”
data-cycle-fx=”carousel”
data-cycle-timeout=”3000″
data-cycle-next=”#next”
data-cycle-prev=”#prev”
data-cycle-carousel-visible=”3″
data-cycle-carousel-vertical=”true”>
<img src=”http://malsup.github.io/images/beach1.jpg” />
<img src=”http://malsup.github.io/images/beach2.jpg” />
<img src=”http://malsup.github.io/images/beach3.jpg” />
<img src=”http://malsup.github.io/images/beach4.jpg” />
<img src=”http://malsup.github.io/images/beach5.jpg” />
<img src=”http://malsup.github.io/images/beach9.jpg” />
</div>
<img src=”https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png” id=”next” class=”vertical-slider-nav vertical-slider-nav-down” />
</div>
<script type=”text/javascript”>
$(‘.slideshow’).cycle();
</script>
Then in the top of the html after the head tag i added:
[CODE]<link rel=”stylesheet” type=”text/css” href=”Vertical_Slider.css”>
And i have a css file i created i called it Vertical_Slider.css
And there i added all the style code.
I did it just like the code in this JSFiddle:
[URL=”http://jsfiddle.net/uncb4bs9/3/”]http://jsfiddle.net/uncb4bs9/3/
But what i get is the arrows are in the middle of the images on the slider and they are not working when clicking on them and the slider it self is not moving automatic like in the JSFiddle.