• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ΚΑΘΕΤΟ CAROUSEL SLIDESHOW No 2

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



KERKYRA PAXOI LEYKADA ITHAKI KEFALLONIA ZAKYNTHOS


<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>

1 σχόλιο:

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.