Carousel w Buttons

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/jquery.js"></script>

<script src="https://googledrive.com/host/0B8GeBeRdN9NselV6YUQ4TnZiak0"></script>

<div id="main">

<script src="https://googledrive.com/host/0B8GeBeRdN9NsbU1vMXR3RmZXaUk"></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}

.cycle-pager {position:static; margin-top:0px}

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://lh3.googleusercontent.com/-YfNJcakAcwg/UiiIuLBOAmI/AAAAAAAAJK8/CJvT7ZwDMEI/w1264-h790-no/LEFKADA-02.jpg"/>

<img src="https://lh5.googleusercontent.com/-K7auwzq2lPk/UiiIvU7QHPI/AAAAAAAAJLI/c5aQs1DrUUw/w1264-h790-no/LEFKADA-03.jpg"/>

<img src="https://lh5.googleusercontent.com/-iHpUXMPF_2U/UiiIviNxdII/AAAAAAAAJLM/7Q8ShXmAat0/w1264-h790-no/LEYKADA-24.jpg"/>

<img src="https://lh5.googleusercontent.com/-o50M8GFbcJM/VPgVav9EGOI/AAAAAAAAPuw/z-6HM_7nQ7w/w1264-h790-no/LEYKADA-42.jpg"/>

<img src="https://lh3.googleusercontent.com/-cNJXfE2lGoc/VPgVcRQ5EnI/AAAAAAAAPu4/4Vlocwv-X6o/w1264-h790-no/LEYKADA-43.jpg"/>

<img src="https://lh5.googleusercontent.com/-LB8zka6NnYA/UiiIxk_UOSI/AAAAAAAAJLU/YTAWF35UMF8/w1264-h790-no/LEYKADA-33.jpg"/>

<img src="https://lh5.googleusercontent.com/-LNyox8qqU10/UiiK7dhOtlI/AAAAAAAAJRw/77ETxxQDWAg/w1264-h790-no/ZAKYNTHOS-13.jpg"/>

<img src="https://lh3.googleusercontent.com/-MGuTdTnuTuU/UiiKxad1cdI/AAAAAAAAJRQ/d3Du80t-YvE/w1264-h790-no/ZAKYNTHOS-18.jpg"/>

<img src="https://lh3.googleusercontent.com/-X-UZsR0Usfw/VPgVVFHmkNI/AAAAAAAAPuo/6Bc3J2_4d-I/w1264-h790-no/KEFALONIA-42.jpg"/>

<img src="https://lh5.googleusercontent.com/-hodGag3QpQE/VPgV7kclq8I/AAAAAAAAPvo/not2StPmvIU/w1264-h790-no/SAMOS-33.jpg"/>

<img src="https://lh3.googleusercontent.com/-wdu_wIn5Lj0/VPgV8sXTBvI/AAAAAAAAPvw/sYvFyQR6xj0/w1264-h790-no/SAMOS-32.JPG"/>

<img src="https://lh3.googleusercontent.com/-hEgO-XMchEk/VPgV-vpSQfI/AAAAAAAAPv4/usx5ZtC6TJE/w1264-h790-no/SAMOS-30.jpg"/>

<img src="https://lh3.googleusercontent.com/-poEax-ahwuU/VPgWA73NnNI/AAAAAAAAPwA/H2i9kXGivSM/w1264-h790-no/SAMOS-23.jpg"/>

<img src="https://lh5.googleusercontent.com/-_1adH3wAdHo/VPgV4v2d1eI/AAAAAAAAPvg/7c97HXhsdbQ/w1264-h790-no/SAMOS-35.jpg"/>

<img src="https://lh3.googleusercontent.com/-Ryr1m4tLIBQ/VPgVwV20hhI/AAAAAAAAPvI/oU27utK_PiM/w1264-h790-no/SAMOS-50.jpg"/>

</div>

<div class=center>

<a href=# id=prev>◄◄ PREVIOUS…..</a>

<a href=# id=next>…..NEXT ►►</a>

</div>

http://gadgetsforblogs7.blogspot.gr/2015/04/carousel-slideshow-with-buttons-no-1.html