Crea un control deslizante de imagen con temática de iPad con jQuery

Si no es un desarrollador web experimentado, puede ser bastante intimidante abordar un proyecto donde su cliente está buscando algo moderno e interactivo, como una presentación centrada en Apple.

Hoy le enseñaremos cómo puede crear un proyecto de este tipo en tan solo unos minutos utilizando algunos recursos gratuitos increíbles de toda la web. Lo guiaremos a través de diez pasos súper simples, por lo que incluso si tiene poca o ninguna experiencia en la web, ¡este proyecto debería ser una brisa!

Lo que estamos construyendo

El propósito de este tutorial es mostrarte lo fácil que es crear una página web increíblemente animada e interactiva con recursos completamente gratuitos y muy poco esfuerzo por juntarlos. Usaremos jQuery, una imagen de iPad gratuita y un complemento de control deslizante de imagen gratuito para lograr el siguiente efecto.

• Página de demostración
• Descargar archivos

Paso 1: Inicia el HTML

Lo primero que queremos hacer es obtener una estructura básica para nuestro HTML. Simplemente pegue en su documento típico de inicio HTML. Usé HTML5 a continuación, pero puedes usar algo más antiguo si crees que es apropiado.

Título de la página

Tenga en cuenta que en este punto he incluido dos enlaces: uno a una hoja de estilo y otro a jQuery. Asegúrate de incluir ambos. Muchos desarrolladores también recomiendan incluir una versión local de jQuery en caso de que la versión vinculada falle por algún motivo.

El único marcado real que tenemos en este punto es un contenedor div. Agregaremos más tarde, pero por ahora esto es perfecto.

Paso 2: Descarga el iPad

Obviamente, necesitaremos una imagen de iPad. El iPad es lo suficientemente simple como para que puedas crear el tuyo bastante rápido, pero solo tomaremos una versión preconstruida para acelerar el proceso.

Si tienes Google? IPad PSD ,? La primera opción que aparece es un increíble archivo gratuito de Teehan + Lax, no solo con el iPad en sí, sino también con un montón de elementos de la interfaz de usuario.

Descargue esta imagen de iPad y póngala en Photoshop para prepararse para el siguiente paso.

Paso 3: Preparar el PSD

Tome las capas que contienen solo el iPad en blanco y colóquelas en un nuevo documento con las dimensiones establecidas en 883px por 535px. Establezca el color de fondo en # 1b1a1b y ajuste el tamaño del iPad para que la pantalla tenga aproximadamente 460 píxeles de ancho.

Para agregar algo de interés visual, también puse una sombra y una reflexión. Observe que la reflexión se desvanece antes de golpear la parte de la pantalla. Esto simplifica mucho las cosas al cancelar la necesidad de una reflexión en vivo que se actualice con cada diapositiva.

Paso 4: Inicia el CSS

Ahora que tenemos nuestra imagen de fondo del iPad, inicie un archivo style.css y configure la imagen del iPad como fondo.

* {margen: 0; relleno: 0; } body {background-color: # 1b1a1b; } #container {width: 883px; altura: 535px; imagen de fondo: url (images / ipad.jpg); desbordamiento: oculto; margen: 30px auto; }

Como siempre, he incluido un restablecimiento de CSS básico para asegurarme de que todos los navegadores estén en la misma página con márgenes y relleno. También he establecido el color de fondo en el mismo color que teníamos en nuestro PSD. Finalmente, lancé la imagen del iPad y la centré en la página estableciendo un ancho y usando "auto". por los márgenes.

Vista previa del progreso

En este punto, la vista previa en vivo debe ser similar a la imagen de abajo. Hasta el momento solo hay un iPad centrado en un fondo sólido, ¡pero ya está empezando a verse bastante bien!

Paso 5: Añadir una imagen

Antes de importar la presentación de diapositivas real, desearemos que nuestro posicionamiento se resuelva con una sola imagen estática. Hacer esto ahora nos facilita las cosas para que no tengamos que colocar un elemento activo que puede o no estar funcionando correctamente.

Primero, obviamente querrá crear o tomar una imagen de algún lugar. Acabo de usar una foto de mi feo conjunto de 460 x 345. ¿Deseas lanzar tu imagen a un deslizador? div dentro del contenedor.

<img src="//lesptitesaffairesdemayl.be/img/images_2/build-an-ipad-themed-image-slider-with-jquery_5.jpg"> <h2>Paso 6: Descarga el deslizador Nivo</h2> <p>jQuery hace que la creación de controles deslizantes de imágenes personalizados sea una brisa, pero los complementos jQuery precompilados como Nivo Slider realmente reducen la cantidad de trabajo necesario alrededor de cero y pueden proporcionar un resultado final hermoso y profesional. </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/build-an-ipad-themed-image-slider-with-jquery_6.jpg"> <p>Ve a descargar una copia gratuita de Nivo Slider. Este control deslizante fácil de implementar tiene nueve opciones de transición, admite subtítulos y enlaces, y es totalmente personalizable. Es un ejemplo perfecto del tipo de regalos de calidad que puede encontrar en la web si sabe dónde buscar. </p> <p>Tome los siguientes dos archivos de la descarga y colóquelos en el directorio raíz de su página:</p> <ul> <li>jquery.nivo.slider.pack.js</li> <li>nivo-slider.css</li> </ul> <p>Recuerde vincular a estos archivos en la parte principal de su HTML. Ahora debería tener cuatro archivos vinculados como en el código a continuación:</p> <textarea wrap="soft" readonly="">

Paso 7: Añadir más imágenes

Ahora que tenemos nuestra presentación de diapositivas, vamos a querer lanzar algunas imágenes más. Nivo tomará automáticamente todas las imágenes contenidas en su div deslizante, por lo que no tenemos que hacer nada especial aquí, sino colocarlas.

<img src="//lesptitesaffairesdemayl.be/img/images_2/build-an-ipad-themed-image-slider-with-jquery_7.jpg"> <h2>Paso 9: Estilizando los controles</h2> <p>Técnicamente, probablemente deberíamos crear todos estos estilos porque la buena gente que proporciona el control deslizante Nivo nos alienta a hacerlo. Sin embargo, para terminar este tutorial rápidamente, solo usaremos la hoja de estilo de muestra que proporcionan aquí.</p> <p>En la descarga se incluyen algunas imágenes y otra hoja de estilo para incluir en su HTML titulado "custom-nivo-slider.css". En lugar de vincular a un millón de hojas de estilo diferentes, en la práctica probablemente sería una buena idea combinarlas para evitar la superposición. </p> <p>La clave que deberá hacer con esta hoja de estilo es deshacerse de la primera sección de estilos que aparecen, ya que interferirán con el posicionamiento que ya hemos implementado. A continuación puede ver cómo comento todo menos el color de fondo y el gráfico de carga. </p> <textarea wrap="soft" readonly=""> #slider {/ * position: relative; margen: 30px 30px 60px 30px; * / background: # 1b1a1b url (loading.gif) no se repite 50% 50%; / * - moz-box-shadow: 0px 0px 10px # 333; -webkit-box-shadow: 0px 0px 10px # 333; cuadro de sombra: 0px 0px 10px # 333; * /}

Paso 10: ¡Echa un vistazo al producto final!

Como puede ver a continuación, ese conjunto final de estilos realmente terminó bien la presentación de diapositivas. Ahora tenemos flechas que nos llevan hacia adelante y hacia atrás, así como una lista horizontal de viñetas para navegar y seguir el progreso de la presentación de diapositivas.

Asegúrese de ver la demostración en vivo para verla en acción. Además, pase algo de tiempo en el sitio Nivo Slider y explore las diversas mejoras disponibles.

¿Qué más te gustaría ver?

Este tutorial surgió de mi búsqueda de algunos recursos excelentes en la web y el deseo de compartirlos con nuestros lectores. Deja un comentario a continuación y hazme saber si hay otros complementos de jQuery o regalos web que te gustaría que se muestren aquí y veré si puedo preparar un tutorial rápido para que te pongas en marcha.

¿Quieres compartir el artículo? Aquí hay una URL corta que puede pegar en Twitter o Facebook: http://ow.ly/2xtcZ