CAROUSEL VERTICAL SLIDESHOW-1

KERKYRA
KERKYRA
PAXOI
PAXOI
LEYKADA
LEYKADA
ITHAKI
ITHAKI
KEFALLONIA
KEFALLONIA
ZAKYNTHOS
ZAKYNTHOS
SKOPELOS
SKOPELOS
ALONNISOS
ALONNISOS
SKIATHOS
SKIATHOS
SKYROS
SKYROS
AIDIPSOS
AIDIPSOS
MYKONOS
MYKONOS
ASTYPALAIA
ASTYPALAIA
SYROS
SYROS
MILOS
MILOS
SANTORINI
SANTORINI
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script>
$(document).ready(function() {
$('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });});
</script>
<script src="https://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/github-codes/b8104ed8b6798090354078e871b47f8f/raw/0b5ba16c6228ed966aee16651b523556c14f752f/jscarousel-2.0.0.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 4, orientation: 'v' });});      
</script>
<style>
.jscarousal-vertical{width: 180px;height: 550px;background:#115599;border:solid 1px #00cc00;margin:0;padding:0;position: relative;overflow: hidden;}
.jscarousal-vertical-back, .jscarousal-vertical-forward{width: 100%;height:15px;background:#333333;color:#FFFFFF; position:relative;cursor:pointer;z-index:100;}
.jscarousal-vertical-back{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrBQsunhCkMifBUm5djbwiPVsLXvNJONNTxpeB9nr_SXiKhBD1ky5-v7hIE2yKOFT01iigmYT87XzKD_pwTGyrFgy5WGecNaM5bSAiOvcaWbdUTfAPzFk_5gduN0ApX7EzrXqtuJRTB4F/w98-h15-no/top_arrow.jpg);background-repeat: no-repeat;background-position: bottom;}
.jscarousal-vertical-forward{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEive0fkfKmOWWQgymIEYEfEcPg0ry3avj3MyJ2QnZPIE2pOBW9UQih61w2W5JrFGSQ3FpPLazuE2FjvS7k_QrlAP-XVY1lQOK_TQ9iHB_5QtYl03Pi2EZGM1cufla1bm9GWLoiakq3NewsA/w98-h15-no/bottom_arrow.jpg);background-repeat: no-repeat;background-position: top;}
.jscarousal-contents-vertical{overflow: hidden;width:180px;height: 520px;}
.jscarousal-contents-vertical > div{position: absolute;top:5px;width:100%;height:550px;overflow: hidden;}
.jscarousal-contents-vertical > div > div{width:160px;height:100px;margin-top:25px;margin-left:10px;}
.jscarousal-contents-vertical > div > div span{display:block;width:100%;text-align:left;}
.jscarousal-contents-vertical img{width:160px;height:100px;border:solid 1px #00cc00;}
.thumbnail-text{color:#FFFFFF;font:12px Arial;text-align:left;display:block;padding:5px;}
.hidden{display: none;}
.visible{display: block;}
</style>
<div id="contents">        
<div id="carouselv">
<div><a href="https://i.imgbox.com/x4YtqHsG" target="_blank">
<img alt="KERKYRA" src="https://i.imgur.com/Pq9Dexat.jpg" /></a><br />
<span class="thumbnail-text">KERKYRA</span></div>
<div><a href="https://i.imgur.com/kbCkBYe.jpg" target="_blank">
<img alt="PAXOI" src="https://i.imgur.com/kbCkBYet.jpg" /></a><br />
<span class="thumbnail-text">PAXOI</span></div>
<div><a href="https://i.imgur.com/gCr4ycD.jpg" target="_blank">
<img alt="LEYKADA" src="https://i.imgur.com/gCr4ycDt.jpg" /></a><br />
<span class="thumbnail-text">LEYKADA</span></div>
<div><a href="https://i.imgur.com/JcRaeRS.jpg" target="_blank">
<img alt="ITHAKI" src="https://i.imgur.com/JcRaeRSt.jpg" /></a><br />
<span class="thumbnail-text">ITHAKI</span></div>
<div><a href="https://i.imgur.com/XMS6PHs.jpg" target="_blank">
<img alt=" KEFALLONIA " src="https://i.imgur.com/XMS6PHst.jpg" /></a><br />
<span class="thumbnail-text">KEFALLONIA</span></div>
<div><a href="https://i.imgur.com/I9SFA0s.jpg" target="_blank">
<img alt=" ZAKYNTHOS " src="https://i.imgur.com/I9SFA0st.jpg" /></a><br />
<span class="thumbnail-text">ZAKYNTHOS</span></div>
<div><a href="https://i.imgur.com/6mZpZ0F.jpg" target="_blank">
<img alt=" SKOPELOS " src="https://i.imgur.com/6mZpZ0Ft.jpg" /></a><br />
<span class="thumbnail-text">SKOPELOS</span></div>
<div><a href="https://i.imgur.com/9GqSG9a.jpg" target="_blank">
<img alt="ALONNISOS" src="https://i.imgur.com/9GqSG9at.jpg" /></a><br />
<span class="thumbnail-text">ALONNISOS</span></div>
<div><a href="https://i.imgur.com/W8LjNt5.jpg" target="_blank">
<img alt="SKIATHOS" src="https://i.imgur.com/W8LjNt5t.jpg" /></a><br />
<span class="thumbnail-text">SKIATHOS</span></div>
<div><a href="https://i.imgur.com/CaUHw47.jpg" target="_blank">
<img alt="SKYROS" src="https://i.imgur.com/CaUHw47t.jpg" /></a><br />
<span class="thumbnail-text">SKYROS</span></div>
<div><a href="https://i.imgur.com/GwVdj0U.jpg" target="_blank">
<img alt="AIDIPSOS" src="https://i.imgur.com/GwVdj0Ut.jpg" /></a><br />
<span class="thumbnail-text">AIDIPSOS</span></div>
<div><a href="https://i.imgur.com/C83SL17.jpg" target="_blank">
<img alt="MYKONOS" src="https://i.imgur.com/C83SL17t.jpg" /></a><br />
<span class="thumbnail-text">MYKONOS</span></div>
<div><a href="https://i.imgur.com/YCL3P4v.jpg" target="_blank">
<img alt="ASTYPALAIA" src="https://i.imgur.com/YCL3P4vt.jpg" /></a><br />
<span class="thumbnail-text">ASTYPALAIA</span></div>
<div><a href="https://i.imgur.com/3sNGgku.jpg" target="_blank">
<img alt="SYROS" src="https://i.imgur.com/3sNGgkut.jpg" /></a><br />
<span class="thumbnail-text">SYROS</span></div>
<div><a href="https://i.imgur.com/w9qsfyQ.jpg" target="_blank">
<img alt="MILOS" src="https://i.imgur.com/w9qsfyQt.jpg" /></a><br />
<span class="thumbnail-text">MILOS</span></div>
<div><a href="httsp://i.imgur.com/KwuI9Z2.jpg" target="_blank">
<img alt="SANTORINI" src="https://i.imgur.com/KwuI9Z2t.jpg" /></a><br />
<span class="thumbnail-text">SANTORINI</span></div></div></div>