Το παρακάτω slideshow έχει την δυνατότητα να εμφανίζει πολλές φωτογραφίες μαζί σε κάθετη διάταξη και για κάθε μία εικόνα που παρέρχεται από πάνω εμφανίζεται και μία από κάτω. Επίσης διαθέτει και κουμπιά πλοήγησης. Το μέγεθος των εικόνων μπορείτε να το προσαρμόσετε αλλάζοντας τα width και τα height. Το πόσες εικόνες θα εμφανίζονται ταυτόχρονα στο slideshow το ρυθμίζεται αλλάζοντας το data-cycle-carousel-visible=3. Το πόσο γρήγορα θα εναλλάσονται οι εικόνες του slideshow το ρυθμίζετε αλλάζοντας το data-cycle-timeout=1000.
.
.
.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="https://github-codes.github.io/mycodes/javascripts/jquery-cycle2A.js"></script>
<script src="https://github-codes.github.io/mycodes/javascripts/jquery-cycle2B.js"></script>
<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
<style>
.slideshow {margin: auto}
.slideshow img {width:auto; height:200px; padding:2px; }
div.responsive img {width:auto; height:200}
.center {position:static; text-align:center;margin-top:2px}
div.vertical {width:auto;}
</style>
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=2000
data-cycle-carousel-visible=3
data-cycle-carousel-vertical=true
data-cycle-next="#next"
data-cycle-prev="#prev">
<img alt="KERKYRA" src="https://i.imgur.com/Pq9Dexam.jpg" />
<img alt="PAXOI" src="https://i.imgur.com/kbCkBYem.jpg" />
<img alt="LEYKADA" src="https://i.imgur.com/gCr4ycDm.jpg" />
<img alt="ITHAKI" src="https://i.imgur.com/JcRaeRSm.jpg" />
<img alt="KEFALLONIA" src="https://i.imgur.com/XMS6PHsm.jpg" />
<img alt="ZAKYNTHOS" src="https://i.imgur.com/I9SFA0sm.jpg" />
</div>
<div class=left>
<a href=# id=prev>◄◄ PREV</a>
<a href=# id=next>NEXT ►►</a>
</div>
