CAROUSEL SCROLLING SLIDESHOW

CAROUSEL SCROLLING SLIDESHOW

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

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

<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>