• 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 WITH BUTTONS No 1

CAROUSEL SLIDESHOW WITH BUTTONS No 1
Το παρακάτω slideshow έχει την δυνατότητα να εμφανίζει πολλές φωτογραφίες μαζί σε οριζόντια διάταξη και για κάθε μία εικόνα που παρέρχεται από τα αριστερά εμφανίζεται μία από τα δεξιά. Επίσης διαθέτει και κουμπιά πλοήγησης. Το μέγεθος των εικόνων μπορείτε να το προσαρμόσετε αλλάζοντας τα γαλάζια νούμερα. Το πόσες εικόνες θα εμφανίζονται ταυτόχρονα στο slideshow το ρυθμίζεται αλλάζοντας το data-cycle-carousel-visible=4. Το πόσο γρήγορα θα εναλλάσονται οι εικόνες του slideshow το ρυθμίζετε αλλάζοντας το data-cycle-timeout=1000.

ΔΕΙΤΕ ΕΔΩ ΤΟ SLIDER ΣΕ ΛΕΙΤΟΥΡΓΙΑ ►

<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:100px; padding:2px; }
div.responsive img {width:auto; height:100}
.center {position:static; text-align:center;margin-top:2px}
div.vertical {width:auto}
</style>

<div class="slideshow"
    data-cycle-fx=carousel
    data-cycle-timeout=1000
    data-cycle-carousel-visible=4
    data-cycle-next="#next"
    data-cycle-prev="#prev">
<img src="http://i.imgur.com/fiVofHIm.jpg"/>
<img src="http://i.imgur.com/rcivwQJm.jpg"/>
<img src="http://i.imgur.com/0nyxX2Lm.jpg"/>
<img src="http://i.imgur.com/gptb8xnm.jpg"/>
<img src="http://i.imgur.com/oSC4D7Rm.jpg"/>
<img src="http://i.imgur.com/9GqSG9am.jpg"/>
<img src="http://i.imgur.com/7X4wjWSm.jpg"/>
<img src="http://i.imgur.com/kbCkBYem.jpg"/>
<img src="http://i.imgur.com/1l2cZBCm.jpg"/>
<img src="http://i.imgur.com/XZLp5MAm.jpg"/>
<img src="http://i.imgur.com/uFoNudkm.jpg"/>
<img src="http://i.imgur.com/DgCJJQem.jpg"/>
<img src="http://i.imgur.com/1Yul3Hvm.jpg"/>
<img src="http://i.imgur.com/Nq06hwXm.jpg"/>
<img src="http://i.imgur.com/0pOnQXwm.jpg"/>
<div class=center>
<a href=# id=prev>◄◄ PREVIOUS…..</a>
<a href=# id=next>…..NEXT ►►</a>
</div>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

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

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