Como porner este slider en tu sitio web y descarga de archivos comprimido
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 de los dos a cuatro 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 si es mas pequeño.
En la primera caja de código estan los enlaces de los estilos css , los enlaces de los archivos javascript y de Jquery ademas de unas instrucciones en código javascript para iniciar el slider todo esto lo debes colocar en el head de tu sitio web.
ENLACES DE CSS Y JAVASCRITP
<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
} ),
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, si tienes plantilla propia tienes mas posibilidades de poner este slider donde mas quieras de otro modo elige la herramienta de insertar HTML.
El código no tiene enlaces así que no va cargar por lo que 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.
CÓDIGO 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.
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 la descripcion donde estan letras azules.
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 copia este codigo la veces que quieras por el contrario si quieres menos elimina esta etiqueta.
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.
