• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

3D CAROUSEL SLIDESHOW No 2

3D CAROUSEL SLIDER
3D  CAROUSEL SLIDESHOW-2
Το παρακάτω 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>

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

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

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

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