ΚΑΘΕΤΟ CAROUSEL SLIDESHOW No 2

ΚΑΘΕΤΟ CAROUSEL SLIDESHOW No 2

Το παρακάτω slideshow έχει την δυνατότητα να εμφανίζει πολλές φωτογραφίες μαζί σε κάθετη διάταξη και για κάθε μία εικόνα που παρέρχεται από πάνω εμφανίζεται και μία από κάτω. Επίσης διαθέτει και κουμπιά πλοήγησης. Το μέγεθος των εικόνων μπορείτε να το προσαρμόσετε αλλάζοντας τα γαλάζια νούμερα. Το πόσες εικόνες θα εμφανίζονται ταυτόχρονα στο slideshow το ρυθμίζεται αλλάζοντας το data-cycle-carousel-visible=3. Το πόσο γρήγορα θα εναλλάσονται οι εικόνες του slideshow το ρυθμίζετε αλλάζοντας το data-cycle-timeout=1000. Δείτε το σε λειτουργία ακριβώς κάτω απο εδώ ▼.

◄◄ PREV NEXT ►►

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<script src="https://dl.dropboxusercontent.com/s/4ud370h48unlvqn/jquery.cycle2A.js"></script>

<script src="https://dl.dropboxusercontent.com/s/ckrrdyjhld0cf5a/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="http://i.imgur.com/Pq9Dexam.jpg" width="320" height="200"/>

<img alt="PAXOI" src="http://i.imgur.com/kbCkBYem.jpg" width="320" height="200"/>

<img alt="LEYKADA" src="http://i.imgur.com/gCr4ycDm.jpg" width="320" height="200"/>

<img alt="ITHAKI" src="http://i.imgur.com/JcRaeRSm.jpg" width="320" height="200"/>

<img alt="KEFALLONIA" src="http://i.imgur.com/XMS6PHsm.jpg" width="320" height="200"/>

<img alt="ZAKYNTHOS" src="http://i.imgur.com/I9SFA0sm.jpg" width="320" height="200"/>

</div>

<div class=left>

<a href=# id=prev>◄◄ PREV</a>

<a href=# id=next>NEXT ►►</a>

</div>