CAROUSEL SLIDESHOW WITH BUTTONS No 1

Date : 04/03/2019

mycodes

346 views

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

SEE THE DEMO HERE ►

<script src='https://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="https://i.imgur.com/fiVofHIm.jpg"/>
<img src="https://i.imgur.com/rcivwQJm.jpg"/>
<img src="https://i.imgur.com/0nyxX2Lm.jpg"/>
<img src="https://i.imgur.com/gptb8xnm.jpg"/>
<img src="https://i.imgur.com/oSC4D7Rm.jpg"/>
<img src="https://i.imgur.com/9GqSG9am.jpg"/>
<img src="https://i.imgur.com/7X4wjWSm.jpg"/>
<img src="https://i.imgur.com/kbCkBYem.jpg"/>
<img src="https://i.imgur.com/1l2cZBCm.jpg"/>
<img src="https://i.imgur.com/XZLp5MAm.jpg"/>
<img src="https://i.imgur.com/uFoNudkm.jpg"/>
<img src="https://i.imgur.com/DgCJJQem.jpg"/>
<img src="https://i.imgur.com/1Yul3Hvm.jpg"/>
<img src="https://i.imgur.com/Nq06hwXm.jpg"/>
<img src="https://i.imgur.com/0pOnQXwm.jpg"/>
<div class=center>
<a href=# id=prev>◄◄ PREVIOUS…..</a>
<a href=# id=next>…..NEXT ►►</a>
</div>

Post Views: 346