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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_EB8WP1tg0czO5CKis6qxNLLfBmqD-v8JDXPibL7cg2W6ffklY_7pamiLLZpYF-nW1_9dj4N4iGwANCeFqAIdnWJlf7YzetArHUqFHVm4POGbZ8w5Pq90BKcpE-zUscjSYA86c63DY8/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>
|
