3D SLIDESHOW WITH CUBES EFFECT

3D SLIDESHOW WITH CUBES EFFECT

Το παρακάτω 3D slideshow έχει κουμπιά πλοήγησης δεξιά και αριστερά του, αλλά δεν ξεκινάει αυτόματα. Οι φωτογραφίες του αλλάζουν με 2 διαφορετικά 3d εφέ σπάζοντας σε κύβους κάθετους και οριζόντιους. Αλλάξτε τα γαλάζια και τα πράσινα link των εικόνων με τα δικά σας link. Το μέγεθος των εικόνων μπορείτε να το προσαρμόσετε αλλάζοντας τα γαλάζια νούμερα που είναι δίπλα από τα πράσινα links των εικόνων. 

Αν αλλάξετε τις διαστάσεις των εικόνων θα πρέπει να αλλάξετε και την θέση των κουμιών πλοήγησης. Αυτά τα νούμερα τα έχω επισημάνει με κίτρινο χρώμα και βρίσκονται στις τελευταίες γραμμές του κώδικα style, συγκεκριμένα αλλάξτε το top:290px; και το left:950px;

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/s/wtp0kdhwmpowm3a/3D-amazing-slider-a.js"></script>

<script src="https://dl.dropboxusercontent.com/s/2hotea2n62bx20t/3D-amazing-slider-ba.js"></script>

<script>

$(function() {

var Page = (function() {

var $navArrows = $( '#nav-arrows' ).hide(),

$shadow = $( '#shadow' ).hide(),

slicebox = $( '#sb-slider' ).slicebox( {

onReady : function() {

$navArrows.show();

$shadow.show();},

orientation : 'r',

cuboidsRandom : false,

disperseFactor : 30} ),

init = function() {

initEvents();},

initEvents = function() {

$navArrows.children( ':first' ).on( 'click', function() {

slicebox.next();

return false;} );

$navArrows.children( ':last' ).on( 'click', function() {

slicebox.previous();

return false;});};

return { init : init };})();

Page.init();});

</script>

<style>

.sb-slider {margin:0px;padding:0;position:relative;overflow:hidden;width:100%;list-style-type:none;}

.sb-slider li {margin:0;padding:0;display:none;}

.sb-slider li > a {outline:none;}

.sb-slider li > a img {border:none;}

.sb-slider img {max-width:100%;display:block;}

.sb-description {padding:5px;bottom:10px;left:30px;z-index:1000;position:absolute; background: rgba(0, 0, 0, 0.5); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;color:#FFF; -webkit-transition:all 200ms;

 -moz-transition: all 200ms; -o-transition:all 200ms; -ms-transition:all 200ms;transition:all 200ms;}

.sb-slider li.sb-current .sb-description {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80);opacity: 1;}

.sb-slider li.sb-current .sb-description:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";filter:alpha(opacity=99);background:rgba(0, 100, 0, 0.7);}

.sb-perspective {position: relative;}

.sb-perspective > div {position: absolute;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;}

.sb-side {margin:0;display:block;position:absolute;-moz-backface-visibility:hidden;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;}

.container {margin:0px;}

.sb-description h3 {font:bold 20px arial;color:#FFF;}

.nav-arrows {display:none;}

.nav-arrows a {width:42px;height:42px;background:#105105 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5YXxL3Egad1BYGusi0jAYcGyN4p-2zn2A9ZptSpueAMtkRo5bt72wtAsnzti_cMF2HhV0f94UWYzxHEkDDwxxTVfM618VJ_H-cOroJDEgQ_7ZWDq3i5kOXvPJuvfcwiPd70AA9_cb_PA/w84-h42-no/nav84.png) no-repeat top left;position:absolute;top:290px;left:0px;text-indent:-9000px;cursor:pointer;margin-top:0px;opacity:0.9;border-radius:15%;}

.nav-arrows a:first-child{left:950px;right:0px;background-position:top right;}

.nav-arrows a:hover {opacity:1;}

</style>

<div class="container">

<div class="wrapper">

<ul id="sb-slider" class="sb-slider">

<li><a href="http://i.imgbox.com/x4YtqHsG" target="_blank">

<img src="http://i.imgur.com/Pq9Dexah.jpg" width="960" height="600" alt="KERKYRA"/></a>

<div class="sb-description"><h3>KERKYRA</h3></div></li>

<li><a href="http://i.imgur.com/kbCkBYe.jpg" target="_blank">

<img src="http://i.imgur.com/kbCkBYeh.jpg" width="960" height="600" alt="PAXOI"/></a>

<div class="sb-description"><h3>PAXOI</h3></div></li>

<li><a href="http://i.imgbox.com/MIiFeUzy" target="_blank">

<img src="http://i.imgur.com/gCr4ycDh.jpg" width="960" height="600" alt="LEYKADA"/></a>

<div class="sb-description"><h3>LEYKADA</h3></div></li>

<li><a href="http://i.imgbox.com/ZpvJrjg4" target="_blank">

<img src="http://i.imgur.com/JcRaeRSh.jpg" width="960" height="600" alt="ITHAKI"/></a>

<div class="sb-description"><h3>ITHAKI</h3></div></li>

<li><a href="http://i.imgbox.com/4jvkDVTA" target="_blank">

<img src="http://i.imgur.com/XMS6PHsh.jpg" width="960" height="600" alt="KEFALONIA"/></a>

<div class="sb-description"><h3>KEFALONIA</h3></div></li>

<li><a href="http://i.imgbox.com/R6GYEpSU" target="_blank">

<img src="http://i.imgur.com/I9SFA0sh.jpg" width="960" height="600" alt="ZAKYNTHOS"/></a>

<div class="sb-description"><h3>ZAKYNTHOS</h3></div></li>

<li><a href="http://i.imgur.com/bVvl5yw.jpg" target="_blank">

<img src="http://i.imgur.com/bVvl5ywh.jpg" width="960" height="600" alt="KYTHYRA"/></a>

<div class="sb-description"><h3>KYTHYRA</h3></div></li></ul>

<div id="shadow" class="shadow"></div>

<div id="nav-arrows" class="nav-arrows">

<a href="#">Next</a><a href="#">Previous</a></div></div></div>