:: CP - Recursos Web ::

Z Slide

EJEMPLO

Por un tema de una mejor visualización del ejemplo, este será en una pagina externa a esta. La cual es administrada exclusivamente por nosotros.

cp_opc_ejemplo

[ SABER MÁS DE ESTO? ]

INFORMACIÓN

Nombre: Z Slide

Fecha: 2016-05-10

Creditos: helperblogger.com

Diseño para: Javascript

Garantia: SI?

Descripción:

Z Slide, es un simple modo de presentar tus imágenes o tus titulares, es muy fácil de implementar y te ahorra espacio y le dará interactividad a tu sitio.

- Codigo 01: Por encima de la pagina o extra head:

<script src="https://dl.dropboxusercontent.com/s/4rc4lacnlgblg9m/js-image-slider.js" type="text/javascript"></script>
<style type="text/css">
#mcis {display: none;}
#sliderFrame {position: relative;width: 500px;margin: 0 auto;margin-bottom:35px;border:5px solid #000;}
#ribbon {width: 111px;height: 111px;position: absolute; top: -4px;left: -4px;
background:  none no-repeat;z-index: 7;}
#slider {width: 500px; height: 250px;
background: #fff url("https://img.webme.com/pic/c/cssplantillas/load.gif") no-repeat 50% 50%;
position: relative;margin: 0 auto;box-shadow: 0px 1px 5px #999999;}
#slider img {position: absolute;border: none;display: none;}
#slider a.imgLink { z-index: 2;display: none;position: absolute;top: 0px;left: 0px;
border: 0;padding: 0;margin: 0;width: 100%;height: 100%;}
div.mc-caption-bg, div.mc-caption-bg2 {position: absolute;width: 100%;
height: auto;padding: 0;left: 0px;bottom: 0px;z-index: 3;overflow: hidden;font-size: 0;}
div.mc-caption-bg {background-color: black;}
div.mc-caption {font: bold 14px/20px Arial;color: #EEE;z-index: 4;padding: 10px 0;text-align: center;}
div.mc-caption a {color: #FB0;}
div.mc-caption a:hover {color: #DA0;}
div.navBulletsWrapper {top: 265px; left: 190px;width: 150px;
background: none;padding-left: 20px;position: relative;z-index: 5;cursor: pointer;}
div.navBulletsWrapper div {width: 11px;height: 11px;
background: transparent url("https://img.webme.com/pic/c/cssplantillas/bullet_cp.png") no-repeat 0 0;
float: left;overflow: hidden; vertical-align: middle;cursor: pointer;margin-right: 11px;_position: relative;
div.navBulletsWrapper div.active {background-position: 0 -11px;}
#slider {transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);}
</style>

Copiar codigo

- Codigo 02: Donde quieras que aparezca:

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo

)

CLICK AQUI PARA DESCARGAR

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Debes editar solo el segundo código, esta especificado donde editar y colocar las imágenes. De preferencia utiliza imágenes de 500px de ancho y 250px de largo.
- Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 102 visitantesGracias por tu visita!

Recomendamos:

| CERRAR