3D CAROUSEL SLIDESHOW-2
Το παρακάτω 3D carousel slideshow έχει
την δυνατότητα να εμφανίζει πολλές φωτογραφίες μαζί σε οριζόντια διάταξη, εμφανίζωντας
πρώτα την μεσαία φωτογραφία της λίστας και εσεις με τα κουμπιά πλοήγησης
μπορείτε να δείτε είτε τις επόμενες είτε τις προηγούμενες. Δεν ξεκινάει αυτόματα
δηλαδή. Το μέγεθος των εικόνων μπορείτε να το προσαρμόσετε αλλάζοντας τα
γαλάζια νούμερα εκεί που γράφει, width:640px;height:400px;
Αυτό το slideshow χρειάζεται
μεγάλο πλάτος από 1360px και πάνω, οπότε είναι κατάληλο για το υποσέλιδο ή για
μία σελίδα του 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>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.