GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

CAROUSEL SCROLLING SLIDESHOW

CAROUSEL SLIDER
CAROUSEL SCROLLING SLIDESHOW
Το παρακάτω carousel scrolling slideshow είναι πολύ απλό και ελαφρύ δεν χρειάζεται να φορτώσει jquery και είναι προσαρμόσιμο σε πλάτος, ύψος, αριθμό εικόνων και ταχύτητα κύλισης. Στο πρώτο width:1000px; height:150px; αλλάζετε το πλατος και το ύψος του slideshow στο τρίτο width:200px; height:125px; αλλάζετε το πλάτος και το ύψος των εικόνων που βρίσκονται εντός του slideshow. Αντικαταστήστε τα δικά μου γαλάζια και τα πράσινα links των εικόνων με τα δικά σας.

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

<style>
@-webkit-keyframes slider {
0% {left: 0%;}
20% {left: -20%;}
40% {left: -40%;}
60% {left: -60%;}
80% {left: -80%;}
100% {left: -100%;}}
@keyframes slider {
0% {left: 0%;}
20% {left: -20%;}
40% {left: -40%;}
60% {left: -60%;}
80% {left: -80%;}
100% {left: -100%;}}
.carousel-container {width:1000px; height:150px; overflow:hidden; background:#173377;}
.carousel-container .slider-carousel {position: relative;width:9999px; height:125px; -webkit-animation: 3s slider infinite; animation: 30s slider infinite;}
.carousel-container .slider-carousel span {width:200px; height:125px; float:left; background: #105105; color:#FFFFFF; font:14px arial;}
</style>

<div class="carousel-container">
<div class="slider-carousel">
<span><a href="http://i.imgbox.com/f8Hms23V" target="_blank"><img src="http://i.imgur.com/fiVofHIm.jpg" width="200" height="125" />ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ</span></a>
<span><a href="http://i.imgur.com/gCr4ycD.jpg" target="_blank"><img src="http://i.imgur.com/gCr4ycDm.jpg" width="200" height="125" />ΠΟΡΤΟ ΚΑΤΣΙΚΙ ΛΕΥΚΑΔΑ</span></a>
<span><a href="http://i.imgur.com/qrKer61.jpg" target="_blank"><img src="http://i.imgur.com/qrKer61m.jpg" width="200" height="125" />ΜΥΡΤΟΣ ΚΕΦΑΛΟΝΙΑ</span></a>
<span><a href="http://i.imgur.com/Pq9Dexa.jpg" target="_blank"><img src="http://i.imgur.com/Pq9Dexam.jpg" width="200" height="125" />ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΚΕΡΚΥΡΑ</span></a>
<span><a href="http://i.imgur.com/oSC4D7R.jpg" target="_blank"><img src="http://i.imgur.com/oSC4D7Rm.jpg" width="200" height="125" />ΚΟΥΚΟΥΝΑΡΙΕΣ ΣΚΙΑΘΟΣ</span></a>
<span><a href="http://i.imgur.com/xHwALvD.jpg" target="_blank"><img src="http://i.imgur.com/xHwALvDm.jpg" width="200" height="125" />ΤΣΑΜΠΙΚΑ ΡΟΔΟΣ</span></a>
<span><a href="http://i.imgur.com/3Jk6C5n.jpg" target="_blank"><img src="http://i.imgur.com/3Jk6C5nm.jpg" width="200" height="125" />ΠΟΤΑΜΙ ΣΑΜΟΣ</span></a>
<span><a href="http://i.imgur.com/gptb8xn.jpg" target="_blank"><img src="http://i.imgur.com/gptb8xnm.jpg" width="200" height="125" />ΜΠΑΛΟΣ ΚΡΗΤΗ</span></a>
<span><a href="http://i.imgur.com/H2PNDWB.jpg" target="_blank"><img src="http://i.imgur.com/H2PNDWBm.jpg" width="200" height="125" />ΕΓΓΡΕΜΝΟΙ ΛΕΥΚΑΔΑ</span></a>
<span><a href="http://i.imgur.com/qMMDdhY.jpg" target="_blank"><img src="http://i.imgur.com/qMMDdhYm.jpg" width="200" height="125" />ΑΠΕΛΛΑ ΚΑΡΠΑΘΟΣ</span></a>
</div></div>

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

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

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