Gallery 3D es un Slider deimágenes que crea una efecto realista en 3D con CSS Y JQUERY siendo un slider experimental se ha hecho popular en varios sitios web hoy les enseño como instalar de manera sencilla este espectacular slider.
Mostrar Codigo style .contenedor{ width: 100%; height: 450px; position: relative; } .contenedor_imagenes{ width: 481px; height: 316px; margin: 0 auto; position: relative; -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-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; } .contenedor_imagenes a{ width: 482px; height: 316px; display: block; position: absolute; left: 0; top: 0; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWEk6M7T3SsXD0fq0sKgfub8UWtxk3LplXmN3vYmItbNpFeAus4Q73mLnFmW9zDXssU-K9tsW645JywcW3m_LXku6hfJtEyjtNLr8y6gvhyphenhyphenQ5E_Dore0l46JZ-3V2fDQjX_6MbLY-rlU/s482/browser.png) no-repeat top left; box-shadow: 0px 10px 20px rgba(0,0,0,0.3); } .contenedor_imagenes a.dg-transition{ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .contenedor_imagenes a img{ display: block; padding: 41px 0px 0px 1px; } .contenedor_imagenes a div{ font-style: italic; text-align: center; line-height: 50px; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); color: #333; font-size: 16px; width: 100%; bottom: -55px; display: none; position: absolute; } .contenedor_imagenes a.dg-center div{ display: block; } .contenedor nav{ width: 58px; position: absolute; z-index: 1000; bottom: 40px; left: 50%; margin-left: -29px; } .contenedor nav span{ text-indent: -9000px; float: left; cursor:pointer; width: 24px; height: 25px; opacity: 0.8; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv18sucI-GQxuajJM8e8babnvLxWOwzLyNVnbVaNRA2BU8HiZ1rj1oqGGFw1yUHjeWP-1AOHp2Ez1JpRi1WiAD1jW_vUddsGI8g6IhNixqjxVu9oYLOItRZjvlO7iFbGySXufblYDva7A/) no-repeat top left; } .contenedor nav span:hover{ opacity: 1; } .contenedor nav span.dg-next{ background-position: top right; margin-left: 10px; } /style script type="text/javascript" src="https://sites.google.com/site/javafacesitefile/fileblog/moderni.js"/script script type="text/javascript" src="https://sites.google.com/site/javafacesitefile/fileblog/jquery.gallery.js"/script script type="text/javascript" $(function() { $('#contenedor').gallery({ autoplay : true, // activar slider automatico interval : 2010 //tiempo de la transicion }); }); /script
Nota: debera tener instalado el Plugin JQuery en su blog casocontrariono funcionara
Paso 2) Añadiendo el contenedor y las imágenesterminado el paso 1, dirigase a
Diseño-escoja la opcion
añadir gadget- y escoja la opcion
HTML/javaScript y pegue el siguiente codigo .
section id="contenedor" class="contenedor" div class="contenedor_imagenes" a href="#"img src="images/1.jpg" alt="image01"divTitulo de la imagen/div/a a href="#"img src="images/2.jpg" alt="image02"divTitulo de la imagen/div/a a href="#"img src="images/3.jpg" alt="image03"divTitulo de la imagen/div/a /div !--nav span class="dg-prev"</span span class="dg-next">/span /nav-- /section
Guarde los cambios y listo tendra un Slider en 3D, ahora si usted desea cambiar el aspecto por defecto por ejemplo la imagen que tiene de fondo el contenedor de lasimágenescuyo nombre es
browser,o el tamaño de dicho contenedor
puede hacerlo esto lo encontrara en .
.contenedor_imagenes a{ width: 482px; height: 316px; display: block; position: absolute; left: 0; top: 0; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWEk6M7T3SsXD0fq0sKgfub8UWtxk3LplXmN3vYmItbNpFeAus4Q73mLnFmW9zDXssU-K9tsW645JywcW3m_LXku6hfJtEyjtNLr8y6gvhyphenhyphenQ5E_Dore0l46JZ-3V2fDQjX_6MbLY-rlU/s482/browser.png) no-repeat top left; box-shadow: 0px 10px 20px rgba(0,0,0,0.3); }
No hay comentarios:
Publicar un comentario