GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me 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>

2 σχόλια:

  1. Μου παρουσιάζει το εξής πρόβλημα.
    Αν αλλάξω το height των εικόνων δεν μου εμανίζει όλες τις εικόνες στο slider και ξαναξεκινάει από την αρχή.
    Όσο περισσότερο μεγαλώνω το height τόσο περισσότερες εικόνες μου "τρώει".
    Τι θα μπορούσα να κάνω;

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Πρεπει οι αυξομειώσεις του πλατους και του ύψους να είναι αναλογικές και να υπολογίσεις και 25px επιπλέον στο ύψος για να φαίνονται και οι υπότιτλοι κάτω απο τις εικόνες.

      Διαγραφή

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

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.