GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

ΚΑΘΕΤΟ 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 σχόλιο:

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