Το παρακάτω 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="https://i.imgur.com/I9SFA0sl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/gCr4ycDl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/XMS6PHsl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/w9qsfyQl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/xHwALvDl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/3sNGgkul.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/Pq9Dexal.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/R29XOCZl.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://i.imgur.com/9GqSG9al.jpg" class="coverflow__image" /></a>
<a href=""><img src="https://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, 90, 0, 0.7);}
.prev-arrow {left: 0%;}
.prev-arrow:before {content: "<";}
.next-arrow {right: 0%;}
.next-arrow:after {content: ">";}
</style>
