MY CODES

3D AMAZING SLIDESHOW

326 views

3d-slider3d Amazing slideshow.

 

.

.

.

.

<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: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>
Για να σχολιάσετε πρέπει να συνδεθείτε.
Προηγούμενο άρθρο
3D CAROUSEL SLIDESHOW-3
Επόμενο άρθρο
3D CUBE SLIDESHOW-1