3D AMAZING SLIDESHOW

  • KERKYRA

    KERKYRA

  • PAXOI

    PAXOI

  • LEYKADA

    LEYKADA

  • ITHAKI

    ITHAKI

  • KEFALONIA

    KEFALONIA

  • ZAKYNTHOS

    ZAKYNTHOS

  • KYTHYRA

    KYTHYRA

  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
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
<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://lh4.googleusercontent.com/-KOB5hqd0P5o/WBHeL5SO5KI/AAAAAAAAVwo/P34hcyJzl8MvaWBwNUfInhpz6zHPQiECACL0B/w84-h42-no/nav84.png) no-repeat top left;position:absolute;top:290px;left:30px;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 class="sb-slider" id="sb-slider">
<li><a href="https://i.imgbox.com/x4YtqHsG" target="_blank">
<img alt="KERKYRA" src="https://i.imgur.com/Pq9Dexah.jpg" height="600" width="960" /></a>
<div class="sb-description">
<h3>
KERKYRA</h3>
</div>
</li>
<li><a href="https://i.imgur.com/kbCkBYe.jpg" target="_blank">
<img alt="PAXOI" src="https://i.imgur.com/kbCkBYeh.jpg" height="600" width="960" /></a>
<div class="sb-description">
<h3>
PAXOI</h3>
</div>
</li>
<li><a href="https://i.imgbox.com/MIiFeUzy" target="_blank">
<img alt="LEYKADA" src="https://i.imgur.com/gCr4ycDh.jpg" height="600" width="960" /></a>
<div class="sb-description">
<h3>
LEYKADA</h3>
</div>
</li>
<li><a href="https://i.imgbox.com/ZpvJrjg4" target="_blank">
<img alt="ITHAKI" src="https://i.imgur.com/JcRaeRSh.jpg" height="600" width="960" /></a>
<div class="sb-description">
<h3>
ITHAKI</h3>
</div>
</li>
<li><a href="https://i.imgbox.com/4jvkDVTA" target="_blank">
<img alt="KEFALONIA" src="https://i.imgur.com/XMS6PHsh.jpg" height="600" width="960" /></a>
<div class="sb-description">
<h3>
KEFALONIA</h3>
</div>
</li>
<li><a href="https://i.imgbox.com/R6GYEpSU" target="_blank">
<img alt="ZAKYNTHOS" src="https://i.imgur.com/I9SFA0sh.jpg" height="600" width="960" /></a>
<div class="sb-description">
<h3>
ZAKYNTHOS</h3>
</div>
</li>
<li><a href="https://i.imgur.com/bVvl5yw.jpg" target="_blank">
<img alt="KYTHYRA" src="https://i.imgur.com/bVvl5ywh.jpg" height="600" width="960" /></a>
<div class="sb-description">
<h3>
KYTHYRA</h3>
</div>
</li>
</ul>
<div class="shadow" id="shadow">
</div>
<div class="nav-arrows" id="nav-arrows">
<a href="#">Next</a><a href="#">Previous</a></div>
</div>
</div>