3D CAROUSEL SLIDESHOW No 3

3D  CAROUSEL SLIDESHOW-3

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<style> * {margin: 0;padding: 0;} body {padding: 20px;background: #115599;user-select: none;} [type=radio] {display: none;} #slider {height: 35vw;position: relative;perspective: 1000px;transform-style: preserve-3d;} #slider label {margin: auto;width: 60%;height: 100%;border-radius:4px;position: absolute;left:0;right:0;cursor:pointer;transition:transform 0.4s ease;} #s1:checked ~ #slide4, #s2:checked ~ #slide5, #s3:checked ~ #slide1, #s4:checked ~ #slide2, #s5:checked ~ #slide3 {box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);transform: translate3d(-30%,0,-200px);} #s1:checked ~ #slide5, #s2:checked ~ #slide1, #s3:checked ~ #slide2, #s4:checked ~ #slide3, #s5:checked ~ #slide4 { box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);transform: translate3d(-15%,0,-100px);} #s1:checked ~ #slide1, #s2:checked ~ #slide2, #s3:checked ~ #slide3, #s4:checked ~ #slide4, #s5:checked ~ #slide5 {box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);transform: translate3d(0,0,0);} #s1:checked ~ #slide2, #s2:checked ~ #slide3, #s3:checked ~ #slide4, #s4:checked ~ #slide5, #s5:checked ~ #slide1 {box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);transform: translate3d(15%,0,-100px);} #s1:checked ~ #slide3, #s2:checked ~ #slide4, #s3:checked ~ #slide5, #s4:checked ~ #slide1, #s5:checked ~ #slide2 {box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);transform: translate3d(30%,0,-200px);} #slide1 {background: url(https://i.imgur.com/pTL8ZD9h.jpg)} #slide2 {background: url(https://i.imgur.com/sRPwRGTh.jpg)} #slide3 {background: url(https://i.imgur.com/u6JXTHMh.jpg)} #slide4 {background: url(https://i.imgur.com/wbZBj2ch.jpg)} #slide5 {background: url(https://i.imgur.com/3SRq2CRh.jpg)} </style> <section id="slider"> <input type="radio" name="slider" id="s1"> <input type="radio" name="slider" id="s2"> <input type="radio" name="slider" id="s3" checked> <input type="radio" name="slider" id="s4"> <input type="radio" name="slider" id="s5"> <label for="s1" id="slide1"></label> <label for="s2" id="slide2"></label> <label for="s3" id="slide3"></label> <label for="s4" id="slide4"></label> <label for="s5" id="slide5"></label> </section>