Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα 3D CUBE SLIDESHOW στο blog σας. Μπορείτε να αλλάξετε αν θέλετε τα μεγέθη των εικόνων αλλά αναλογικά πάντα για να μην έχετε παραμόρφωση. Οι διαστάσεις αλλάζουν στην 2η γραμμή του κώδικα style αλλά και στην 6η γραμμή του κώδικα script εκεί που γράφει dimensions: [640, 400]. Τις εικόνες του συγκεκριμένου slideshow πρέπει να τις βάλετε μέσα στο script αντικαθιστώντας τις δικές μου. Δείτε το 3D CUBE SLIDESHOW σε λειτουργία ακριβώς κάτω από εδώ ▼.
.
.
.
<style>
div.jkcubeslideshow{background: white;display:block;width:640px;height:400px;position: relative; -webkit-perspective:1000px; perspective:1000px;}
div.side1, div.side2 {width:100%;height:100%;position:absolute; -moz-box-sizing:border-box; box-sizing: border-box; backface-visibility:hidden; transition:all 1s ease-in-out;}
div.side1 img, div.side2 img {width:100%;height:auto;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/i65uiit5n70qwpv/3D-cube-slideshow.js"></script>
<script>
var cubeshowvar1
jQuery(function($){
cubeshowvar1 = new jkcubeslideshow({
id: 'cubeshow1',
dimensions: [640, 400],
images: [
['http://i.imgur.com/fiVofHIl.jpg'],
['http://i.imgur.com/rcivwQJl.jpg'],
['http://i.imgur.com/0nyxX2Ll.jpg'],
['http://i.imgur.com/gptb8xnl.jpg'],
['http://i.imgur.com/Pq9Dexal.jpg'],
['http://i.imgur.com/xHwALvDl.jpg'],
['http://i.imgur.com/3Jk6C5nl.jpg'],
['http://i.imgur.com/1l2cZBCl.jpg'],
['http://i.imgur.com/qMMDdhYl.jpg'],
['http://i.imgur.com/tZsqBn7l.jpg']]})})
</script>
<div class="jkcubeslideshow" id="cubeshow1"></div>
<a href="#" onClick="cubeshowvar1.rotatecube('back'); return false" style="background:#FBBB22; border-radius:6px;padding:6px;">◄◄ PREVIOUS</a>
<a href="#" onClick="cubeshowvar1.rotatecube('forward'); return false" style="margin-left:422px; background:#FBBB22;border-radius:6px;padding:6px;">NEXT ►►</a>
