Slider de imagenes 3D
Lleva este slider a tu sitio web y descarga los archivos comprimidos, mira como.
Este slider trabaja con Jquery y javascript tiene un efecto 3D y en cada transición realiza cortes ya sea en forma horizontal o vertical que van desde los dos a los cuatro cortes, también realiza la transicion con la imagen sin cortes y se encuentra en modo aleatorio . El tamaño máximo a lo ancho es de 840 pixeles contando desde los botones next/prev, se ajusta al tamaño de tu sitio web (ES RESPONSIVE).
CLIC AQUI PARA VER EL DEMO
En la primera caja de código estan los enlaces de los estilos css , javascript y de Jquery ademas de unas instrucciones en código javascript para iniciar el slider todo esto lo debes colocar dentro del head de tu sitio web.
ENLACES DE CSS Y JAVASCRIPT
<link rel="stylesheet" type="text/css" href="https://notoyontoy.000webhostapp.com/demos/slice-box/css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="https://notoyontoy.000webhostapp.com/demos/slice-box/css/demo.css" />
<link rel="stylesheet" type="text/css" href="https://notoyontoy.000webhostapp.com/demos/slice-box/css/custom.css" />
<script type="text/javascript" src="https://notoyontoy.000webhostapp.com/demos/slice-box/js/modernizr.custom.46884.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://notoyontoy.000webhostapp.com/demos/slice-box/js/jquery.slicebox.js"></script>
<script type="text/javascript">
$(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 : true,
autoplay : true
autoplay : true
} ),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$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>
Ahora esta el código html, este va en el body de tu sitio, elige la herramienta de insertar HTML.
El código no tiene enlaces de las imagenes por lo tanto solo veras unas sombras negras, antes de guardar tienes que agregar los enlaces de tu imágenes, si llega a tardar mucho en cargar es que algo esta mal escrito o un enlace esta roto, el slider no carga hasta encontrar los archivos correctamente.
CODIGO HTML
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank"><img src="01.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Descripcion de la imagen</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="01.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Descripcion de la imagen</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="01.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Descripcion de la imagen</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="01.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Descripcion de la imagen</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="01.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Descripcion de la imagen</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="01.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Descripcion de la imagen</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><!-- /wrapper -->
Dentro de cada etiqueta " li " se coloca la informacion de cada imagen.
Mira el siguiente ejemplo, en el hashtag # rojo va el enlace del sitio web que se abrirá al dar clic sobre la imagen, dentro de las comillas de el atributo src"01.jpg" va la direcion url de la imagen, y por ultimo agrega una pequeña descripcion. Ejemplo:
<li>
<a href="#" target="_blank"><img src="01.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Descripcion de la imagen</h3>
</div>
</li>
Si necesitas mas imagenes repite este codigo la veces que quieras por el contrario si quieres menos lo eliminas.
*El slider se encuentra
La descarga es un archivo comprimido .rar de 8.1 mb subido a mega contiene un archivo html, imágenes, archivos css y js.
Alguna duda escribirla en la caja de comentarios.
SLICE-BOX.RAR
Etiquetas: html, css, js, css3, slide, codigo, slider, facil
Leave a Comment