GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

CAROUSEL SLIDESHOW WITH BUTTONS No 3

CAROUSEL SLIDESHOW
CAROUSEL SLIDESHOW WITH BUTTONS No 3
Αυτό το carousel slideshow ξεκινάει μόνο του και μπορεί να εμφανίσει σε κάθε του πέρασμα 4 εικόνες με περιγραφή. Υπάρχει η δυνατότητα να πλοηγηθήτε στις εικόνες του με τα κουμπιά πλοήγησης next και previous που διαθέτει. Μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι διαστάσεις του slideshow μπορούν να αλλάξουν αλλάζοντας τα γαλάζια νούμερα του width και του height στη 2η γραμμή του κώδικα <style>
Τα links των εικόνων που πρέπει να αντικαταστήσετε με τα δικά σας links βρίσκονται στο τρίτο μέρος του κώδικα και είναι χρωματρισμένα με πράσινο, μώβ και γαλάζιο χρώμα. Οι εκόνες μέσα στο carousel slideshow πρέπει να έχουν διαστάσεις 207Χ138 για να χωρέσει από κάτω η περιγραφή τους. 

ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΑΥΤΟ ΤΟ DEMO BLOG ►

<style>
#carousel{width:960px;height:200px;display:block;background:#173377;}
#carousel .container{position:absolute;left:30px;width:940px;height:190px;overflow:hidden}
#carousel #previous_button {position:absolute;top:17px;width:24px;height:180px;background: url(https://lh5.googleusercontent.com/-j28HsFjcG30/VV3dCV-DpdI/AAAAAAAARdA/TgQMuUyFkpE/s64-no/arrowleft.png) center; background-repeat:no-repeat;z-index:99;cursor:pointer;background-color:#00CC00;}
#carousel #next_button {position:absolute;top:17px;left:940px;width:24px;height:180px; background: url(https://lh3.googleusercontent.com/-pyCcEr7m8OU/VV3dCYWdUKI/AAAAAAAARdE/nkwTgozDdYg/s64-no/arrowright.png) center; background-repeat:no-repeat;z-index:99;cursor:pointer;background-color:#00CC00;}
#carousel ul{width:99999px;position:relative;margin-top:10px}
#carousel ul li{background:#FFFFF0;display:inline;float:left;text-align:left;font:bold 12px Arial;width:207px;height:190px; margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider-disc{color:#173377;display:block;}
#carousel ul li a.slider-disc:hover{color:#F11111}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='https://rawgit.com/github-codes/09d3e5be75afd04a7587a859a40fa74e/raw/36910c9672d6b8f1a088abd61f8bac9d35c91ade/carousel-slider.js'></script>

<script>
(function($) {
$(document).ready(function(){
$("#carousel .container").jCarouselLite({auto:3000, scroll: 4, speed: 1000, visible: 4, start: 0, circular: true,
btnPrev: "#previous_button", btnNext: "#next_button"});})})(jQuery)     
</script>

<div id="carousel">
<div id="previous_button"></div>
<div class="container" style="visibility: visible; overflow: hidden; z-index: 2; width: 908px;">
<ul>
<li  class="sli"><a href="http://i.imgbox.com/f8Hms23V" target="_blank">
<img src="http://i.imgur.com/fiVofHIm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/f8Hms23V">Η ΠΑΡΑΛΙΑ ΝΑΥΑΓΙΟ ΣΤΗ ΖΑΚΥΝΘΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/MIiFeUzy" target="_blank">
<img src="http://i.imgur.com/gCr4ycDm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/MIiFeUzy">Η ΠΑΡΑΛΙΑ ΠΟΡΤΟ ΚΑΤΣΙΚΙ ΣΤΗ ΛΕΥΚΑΔΑ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/ayyaUKpv" target="_blank">
<img src="http://i.imgur.com/qrKer61m.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/ayyaUKpv">Η ΠΑΡΑΛΙΑ ΜΥΡΤΟΣ ΣΤΗ ΚΕΦΑΛΟΝΙΑ</a></li>

<li class="sli"><a href="http://i.imgbox.com/x4YtqHsG" target="_blank">
<img src="http://i.imgur.com/Pq9Dexam.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/x4YtqHsG">Η ΠΑΡΑΛΙΑ ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΣΤΗ ΚΕΡΚΥΡΑ</a></li>

<li class="sli"><a href="http://i.imgbox.com/kVCP59nd" target="_blank">
<img src="http://i.imgur.com/oSC4D7Rm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/kVCP59nd">Η ΠΑΡΑΛΙΑ ΚΟΥΚΟΥΝΑΡΙΕΣ ΣΤΗ ΣΚΙΑΘΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/hrhb3CQF" target="_blank">
<img src="http://i.imgur.com/xHwALvDm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/hrhb3CQF">Η ΠΑΡΑΛΙΑ ΤΣΑΜΠΙΚΑ ΣΤΗ ΡΟΔΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/fRGLvJyR" target="_blank">
<img src="http://i.imgur.com/3Jk6C5nm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/fRGLvJyR">Η ΠΑΡΑΛΙΑ ΠΟΤΑΜΙ ΣΤΗ ΣΑΜΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/HYGCh1WJ" target="_blank">
<img src="http://i.imgur.com/gptb8xnm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/HYGCh1WJ">Η ΠΑΡΑΛΙΑ ΜΠΑΛΟΣ ΣΤΗ ΚΡΗΤΗ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/dhx6QEfD" target="_blank">
<img src="http://i.imgur.com/H2PNDWBm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/dhx6QEfD">Η ΠΑΡΑΛΙΑ ΕΓΓΡΕΜΝΟΙ ΣΤΗ ΛΕΥΚΑΔΑ</a></li>

<li  class="sli"><a href="http://i.imgur.com/2OIqV1bm.jpg" target="_blank">
<img src="http://i.imgur.com/2OIqV1bm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgur.com/2OIqV1bm.jpg">Η ΠΑΡΑΛΙΑ ΤΣΑΜΑΔΟΥ ΣΤΗ ΣΑΜΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/5ZDT7J4L" target="_blank">
<img src="http://i.imgur.com/1l2cZBCm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/5ZDT7J4L">Η ΠΑΡΑΛΙΑ ΚΟΚΚΙΝΟΚΑΣΤΡΟ ΣΤΗΝ ΑΛΟΝΝΗΣΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/ehQDNsgV" target="_blank">
<img src="http://i.imgur.com/qMMDdhYm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/ehQDNsgV">Η ΠΑΡΑΛΙΑ ΑΠΕΛΛΑ ΣΤΗ ΚΑΡΠΑΘΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/M9MigOVh" target="_blank">
<img src="http://i.imgur.com/FURuBVWm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/M9MigOVh">Η ΠΑΡΑΛΙΑ ΑΓΙΟΦΥΛΛΙ ΣΤΗ ΛΕΥΚΑΔΑ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/bACYmkOx" target="_blank">
<img src="http://i.imgur.com/tZsqBn7m.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/bACYmkOx">Η ΠΑΡΑΛΙΑ ΤΗΣ ΑΓΙΑΣ ΑΝΝΑΣ ΣΤΗΝ ΑΜΟΡΓΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/dTEbNHax" target="_blank">
<img src="http://i.imgur.com/n5IesXRm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/dTEbNHax">Ο ΠΟΡΟΣ ΑΠΟ ΤΟ ΠΛΟΙΟ</a></li>

<li  class="sli"><a href="http://i.imgbox.com/fJnCogAI" target="_blank">
<img src="http://i.imgur.com/7X4wjWSm.jpg" width="207" height="138" /></a>
<a class="slider-disc" href="http://i.imgbox.com/fJnCogAI">ΤΟ ΠΟΝΤΙΚΟΝΗΣΙ ΣΤΗΝ ΚΕΡΚΥΡΑ</a></li>
</ul></div>
<div id="next_button"></div></div>

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

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

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