GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

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>

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

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

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