Share
Lo siguiente en la sesión de Premium Pixels son los controles de control deslizante de imagen de Orman. Tomaremos el PSD, lo reconstruiremos para el navegador y luego haremos que todo funcione con el genial Nivo Slider jQuery Plugin..
Para mantener todo ordenado primero crearemos nuestra estructura de carpetas. Continúe y cree tres carpetas llamadas "css", "images" y "js" respectivamente. La carpeta css contendrá nuestra hoja de estilo. Las imágenes son para, así que las imágenes y js contendrán nuestros complementos jQuery: el control deslizante Nivo en este caso!
Bueno, tenemos nuestra estructura de carpetas, ahora necesitamos crear nuestro documento html. Crea esto dentro de la raíz de tu proyecto. Usaremos una plantilla base HTML5 simple, mientras que también enlazaremos con la biblioteca jQuery alojada por Google.
Controles deslizantes de imagen
Arrancaremos las cosas con algunos estilos de reinicio:
html, body, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, forma, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, nav, salida, ruby, sección, resumen, tiempo, marca, audio, video margen: 0; relleno: 0; borde: 0; fuente: heredar; alineación vertical: línea de base; / * Reinicio de la función de visualización de HTML5 para navegadores antiguos * / artículo, aparte, detalles, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; body line-height: 1; ol, ul estilo de lista: ninguno; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; espacio entre bordes: 0; a text-decoration: none;
Ahora, antes de saltar al control deslizante, agregaremos un fondo a la página. Si has descargado la PSD antes, verás que hay una capa con un degradado radial que sugiere una iluminación sutil. Crearemos esto teniendo un patrón repetible, ligeramente más ligero que el PSD. Una vez aplicado el fondo, usaremos algunas casillas con recuadros en la etiqueta html para tratar de replicar la luz en el centro.
html -webkit-box-shadow: inserción 250px 250px 250px rgba (0,0,0, .25), inserción -250px -250px 250px rgba (0,0,0, .25); -moz-box-shadow: inserción 250px 250px 250px rgba (0,0,0, .25), inserción -250px -250px 250px rgba (0,0,0, .25); box-shadow: recuadro 250px 250px 250px rgba (0,0,0, .25), inserto -250px -250px 250px rgba (0,0,0, .25); ancho: 100%; altura: 100%; body background: url (… /images/bg.jpg) repetir; tamaño de letra: 100%;
¡Ahora podemos finalmente comenzar nuestro deslizador! El Nivo Slider es el trabajo de Gilbert Pellegrom y Michael Wright, juntos conocidos como Dev7studios y compañeros profesionales con Orman.
Nos permite crear nuestro control deslizante utilizando la cantidad mínima de marcado posible. Todo lo que necesitamos hacer es crear un div con una ID de lo que quieras; Estoy usando "control deslizante" en este caso, y una clase de "nivoSlider". Entonces todo lo que necesitas hacer es colocar tus imágenes dentro de la división, eso es todo.!
Controles deslizantes de imagen 
A continuación, centraremos nuestro control deslizante en el centro de la página. Si siguió mi último tutorial, habrá pasado por el proceso para lograrlo. Si desea más información, consulte este artículo sobre CSS Tricks..
También hemos seguido adelante y agregado algunas sombras de cuadro al control deslizante, mientras recordamos los prefijos del navegador. Tenga en cuenta que también hemos agregado más CSS que se requiere para que nivoSlider funcione.
#slider position: absolute! important; superior: 50%; izquierda: 50%; ancho: 650px; altura: 350px; margen superior: -175px; margen izquierdo: -325px; -webkit-box-shadow: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); -moz-box-shadow: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); box-shadow: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); .nivoSlider img posición: absoluta; arriba: 0; izquierda: 0; pantalla: ninguna; .nivoSlider a border: 0; bloqueo de pantalla; .nivo-slice display: block; posición: absoluta; índice z: 5; altura: 100%; .nivo-box display: block; posición: absoluta; índice z: 5;
Es hora de integrar el Nivo Slider. Comience por dirigirse a http://nivo.dev7studios.com/pricing/ y descargar el complemento jQuery. Una vez descargado y desempaquetado, copie el archivo jquery.nivo.slider.js en su carpeta js creada en el Paso 1.
A continuación, tendremos que vincular a este archivo dentro de nuestro documento html.
Controles deslizantes de imagen
Ahora que tenemos nuestro complemento descargado y vinculado, tendremos que conectarlo a nuestro control deslizante, mientras definimos algunos parámetros opcionales. Eche un vistazo a la documentación de Nivo para obtener detalles sobre todas las opciones disponibles.
Accentsconagua
