GADGETS FOR BLOGS

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

3D CAROUSEL SLIDESHOW

3D CAROUSEL SLIDER
3D  CAROUSEL SLIDESHOW
Το παρακάτω 3D carousel slideshow έχει την δυνατότητα να εμφανίζει πολλές φωτογραφίες μαζί σε οριζόντια διάταξη, εμφανίζωντας πρώτα την μεσαία φωτογραφία της λίστας και εσεις με τα κουμπιά πλοήγησης μπορείτε να δείτε είτε τις επόμενες είτε τις προηγούμενες. Δεν ξεκινάει αυτόματα δηλαδή. Το μέγεθος των εικόνων μπορείτε να το προσαρμόσετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει, width:640px;height:400px

Αυτό το slideshow χρειάζεται μεγάλο πλάτος από 1360px και πάνω, οπότε είναι κατάληλο για το υποσέλιδο ή για μία σελίδα του blog σας που θα έχετε φροντίσει να αποκρύψετε τις πλαϊνές μπάρες.

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

<section class="row">
<div class="nine columns">
<div class="coverflow top10 bot10">
<a class="prev-arrow"></a>
<a href=""><img src="http://i.imgur.com/I9SFA0sl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/gCr4ycDl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/XMS6PHsl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/w9qsfyQl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/xHwALvDl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/3sNGgkul.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/Pq9Dexal.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/R29XOCZl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/9GqSG9al.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/KwuI9Z2l.jpg" class="coverflow__image" /></a>
<a class="next-arrow"></a>
</div></div>
</section>

<script src="https://dl.dropboxusercontent.com/s/z79ujjdn83bf9i0/3D-SLIDER.JS"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/wruobu28zjqagce/3D-SLIDER.CSS">

<style>
.coverflow {position:relative;height:440px;padding:10px;overflow: hidden; -webkit-perspective: 1000px;perspective: 1000px;}
.coverflow__image {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select:none;width:640px;height:400px;-webkit-transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);}
.coverflow__image[data-coverflow-index] {position: absolute;left: 41%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
.coverflow__image[data-coverflow-index]:before {content: " ";z-index: 1;position: absolute;top:440px;width:100%;height: 10%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);}
.prev-arrow, .next-arrow {cursor: pointer;z-index: 10;position: absolute;top: 50%;padding:20px;color: rgba(255, 255, 255, 0.7);font-size:20px;line-height:20px; background:rgba(100, 0, 0, 0.7);border-radius:10px;-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: color 200ms, background 200ms;transition: color 200ms, background 200ms;}
.prev-arrow:hover, .next-arrow:hover, .prev-arrow:focus, .next-arrow:focus {color: rgba(255, 255, 255, 0.9);background: rgba(0, 100, 0, 0.7);}
.prev-arrow {left: 0%;}
.prev-arrow:before {content: "<";}
.next-arrow {right: 0%;}
.next-arrow:after {content: ">";}
</style>

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

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

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