CAROUSEL SLIDESHOW
WITH BUTTONS No 3
Αυτό το carousel slideshow ξεκινάει μόνο
του και μπορεί να εμφανίσει σε κάθε του πέρασμα 4 εικόνες με περιγραφή. Υπάρχει
η δυνατότητα να πλοηγηθήτε στις εικόνες του με τα κουμπιά πλοήγησης next και previous που
διαθέτει. Μπορεί να μπεί σαν gadget σε
οποιοδήποτε σημείο του blog μας αρκεί
να προσαρμόσουμε τις διαστάσεις του. Οι διαστάσεις του slideshow μπορούν να αλλάξουν αλλάζοντας τα γαλάζια νούμερα του width και του height στη 2η
γραμμή του κώδικα <style>
Τα links των εικόνων που
πρέπει να αντικαταστήσετε με τα δικά σας links βρίσκονται στο τρίτο μέρος του κώδικα και είναι
χρωματρισμένα με πράσινο, μώβ και γαλάζιο χρώμα. Οι εκόνες μέσα στο carousel slideshow πρέπει να έχουν διαστάσεις 207Χ138 για να χωρέσει από κάτω η περιγραφή τους.
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP71TFzLxSpQk8Ou6-f3n8nJ_MIYMGzC5Wo3TZitT-GrmznLA7kzA3mOMCsRhEdA6cuPW1AUDBqKuHAA61cll6OyHYeMRtOPqfZn0-psB8WJIQkgcW3lrnMfkS5QbIEzGf74re88hyphenhyphennMuN/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAcjg18ZfYj28_-gHo1YfgkP6VqexYPwdnKHwiJYR5_42OBjsfVCjiushyJq80du7QrNTymPDGRdhViKza52cbmg0QYF46POkoaBvYtb3ZZzn5Azf4no4B51G0OVig9xpnJruNqOUcVO_/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://github-codes.github.io/mycodes/javascripts/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>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.