7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

Cómo crear un control deslizante simple similar a iTunes

Read Time: 10 mins

Spanish (Español) translation by Andrijana Mitevska (you can also view the original English article)

Cuando el espacio es escaso, utilizar los controles deslizantes es la forma óptima de presentar la información. Hoy, veremos cómo crear un control deslizante similar al que se usa en la tienda de iTunes.

iTunes VersioniTunes VersioniTunes Version

Los desarrolladores a menudo buscan la funcionalidad proporcionada por los controles deslizantes para que quepan mucha información en el espacio proporcionado.  Pero crear un control deslizante de este tipo no es tan difícil como podría pensar. Con un poco de planificación y algo de experimentación, puedes crear uno con bastante rapidez.

Creo que una demostración vale más que mil palabras. Accede a la demostración y pruébalo tú mismo.

Tutorial ImageTutorial ImageTutorial Image

¿Interesado? ¡Empecemos de inmediato!

Objetivos de diseño

Antes de comenzar a codificar, aquí hay algunos objetivos para este widget.

  • Minimiza el espacio que ocupan las imágenes haciendo que las dimensiones de la presentación de diapositivas sean del mismo tamaño que una sola imagen y luego difuminando entre ellas.
  • Proporciona un carrusel vertical de imágenes en el lateral que muestra las próximas imágenes.
  • Proporciona un método para mover manualmente el carrusel y la presentación de diapositivas hacia adelante. En este caso, utilizamos un elemento de ancla simple.
  • En el carrusel, la imagen más alta es la siguiente en la línea y se mostrará cuando se haga clic en el botón siguiente.
  • Minimiza la manipulación del DOM tanto como sea posible. Eso no quiere decir que no vamos a tocar el DOM, es solo que no vamos a entrometernos demasiado con el DOM.

Plan de acción

En realidad, hay un puñado de técnicas para hacer un widget como este. Para nuestros propósitos de hoy, me quedaré con una técnica que se adhiere a un dicho:

En caso de duda, utiliza la fuerza bruta.

Paso 1: configura el CSS para el contenedor de la galería de modo que todas las imágenes principales se colapsen para ocupar el espacio de una sola imagen. Explicaré este punto más adelante a continuación.

Paso 2: configura el CSS para el contenedor de miniaturas de modo que solo tres imágenes sean visibles a la vez.

Paso 3: recorre las imágenes y asigna una clase a cada miniatura e imagen con un índice numérico para identificar cada una de forma independiente. Por ejemplo, cada imagen obtiene una clase de thumb-xx donde xx es un número.

Paso 4: cuando se hace clic en el siguiente botón, mueve el carrusel una miniatura hacia arriba y luego muestra la imagen correspondiente de la miniatura.

Estos son los pasos básicos necesarios para crear dicho efecto. Explicaré cada paso en detalle a medida que avancemos.

Paso 1: marcado principal

El marcado HTML para la página de demostración se ve así:

Sin tener en cuenta el código de la placa de la caldera, tenemos dos elementos contenedores llenos de imágenes: uno para las imágenes de la galería principal y otro para las miniaturas.  Les di una identificación a ambos para que se pueda acceder a ellos fácilmente desde JavaScript. También incluimos un elemento de ancla que actúa como el siguiente botón.

Incluimos la biblioteca jQuery y nuestro propio archivo de script al final.

Al final de esta etapa, nuestra página de demostración parece solo una lista de imágenes.

Tutorial ImageTutorial ImageTutorial Image

Paso 2: Estilo CSS

El CSS se explica por sí mismo, pero hay un par de puntos que quiero que tome nota:

En primer lugar, observa que he aplicado position: absolute a #gallery img. Esto asegura que las imágenes se apilen una encima de la otra en lugar de una debajo de la otra. De esta forma luego podemos manipular su opacidad para decidir qué imagen mostrar.

En segundo lugar, observa que el elemento thumbs tiene su altura establecida en 300px. Esto se debe a que las miniaturas de la demostración tienen 100 píxeles de alto cada una y quiero que el carrusel muestre 3 imágenes a la vez.  Básicamente, para tu propia implementación, multiplica la altura de una miniatura por el número de miniaturas que deseas mostrar a la vez para encontrar la altura requerida del elemento.

Además, ten en cuenta el hecho de que hemos establecido su propiedad de desbordamiento en oculto para asegurarnos de que no se muestren más de 3 miniaturas a la vez.

Después de diseñar nuestro control deslizante, se verá como la imagen de abajo. Observa que casi todo está en su lugar. La última imagen se apila en la parte superior y, por lo tanto, es visible.

Tutorial ImageTutorial ImageTutorial Image

Paso 3: Implementación de JavaScript

Ahora que tenemos un marco sólido y un estilo básico implementado, podemos comenzar a codificar la funcionalidad requerida. Ten en cuenta que hacemos un uso extensivo de jQuery. No dudes en vincular a la CDN de Google si es necesario.

Adquirir los elementos y prepararlos

Primero necesitamos adquirir las imágenes y sus correspondientes miniaturas para poder procesarlas.

El fragmento anterior se encargará de obtener la lista de imágenes y miniaturas y de almacenarlas para tu uso posterior.  También creamos una variable llamada índice para indicar desde qué elemento comenzar. Por ahora, lo estoy configurando para que comience desde el primer elemento. Ten en cuenta que el índice se basa en cero.

A continuación, simplemente iteramos a través de ambas listas y agregamos una clase de thumb-xx o image-xx a cada elemento donde xx es un número. Esto nos permite buscar cada miniatura o imagen individual de forma independiente.

Conectando al Handler

Ahora necesitamos crear un controlador de eventos y adjuntarlo al siguiente botón para que podamos hacer algo cuando se hace clic en el botón.

El delineador de arriba se encargará de eso. Esencialmente, le pedimos que llame a la función de tamizado cada vez que se haga clic en Siguiente.

En realidad, este es un controlador de eventos muy simple. Solo verificamos qué elemento está seleccionado actualmente.  Si es el último, reseteamos el índice para que el carrusel vuelva al primer elemento, creando así un carrusel pseudo infinito. De lo contrario, incrementamos el índice en 1.

A continuación, llamamos a la función show, pasando la variable de índice como parámetro. Crearemos la función en un momento.

Paso 4: Implementar la lógica central

La función show implementa la funcionalidad principal de este widget. Déjame explicarte cada parte.

Primero, atenuamos todas las imágenes que contiene el elemento de la galería. A continuación, se desvanece solo la imagen requerida haciendo uso de su clase.  Dado que se puede acceder a cada imagen a través de su clase y tenemos acceso al índice posicional de la imagen, solo usamos el siguiente selector: ".image -" + num

A continuación, debemos desplazar el elemento de miniatura para que la imagen requerida esté en la parte superior del carrusel. Hay dos formas de seguir haciendo esto.

El primer método hace uso de la propiedad de posición de jQuery. Esto nos permite encontrar la posición del elemento en relación con su elemento padre.  Desafortunadamente, he tenido bastantes problemas con él y Chrome, lo que significa que tendremos que usar nuestro segundo método.

El siguiente método es en realidad igual de sencillo. Dado que podemos obtener fácilmente la altura de una miniatura y dado que se requiere que cada miniatura tenga la misma altura, podemos encontrar fácilmente el producto de la posición del elemento n en la lista y la altura de una miniatura para obtener su desplazamiento de la cima.

La línea anterior nos permite obtener la altura de una miniatura. Recuerda que una colección de elementos se puede consultar como un elemento normal.

Ahora calculamos el desplazamiento de la miniatura que necesitamos. Como necesitamos la miniatura del siguiente elemento de la lista y no de esa imagen en sí, la incrementamos en 1 antes de multiplicarla por la altura.

Con toda esta información, ahora podemos desplazar el elemento a la altura que necesitamos.

Usamos la propiedad animada de jQuery para alterar la propiedad scrollTop al valor que calculamos anteriormente.  Si estás nuevo en las funciones de animación de jQuery, consulta mi artículo anterior. Básicamente, desplazamos el elemento x píxeles desde la parte superior para crear un efecto de carrusel.

Paso 5: algunos ajustes

Pulir el efecto pseudo infinito

Básicamente hemos terminado, pero unos pocos bits de código lo harán un poco más pulido.

Básicamente, esta línea toma las tres primeras miniaturas y las copia al final de la lista. El método de corte selecciona los primeros tres elementos, los métodos de clonación clonan estos elementos DOM y finalmente los métodos appendTo los agregan al elemento pasado.

No podemos simplemente usar el método appendTo, ya que extrae los elementos seleccionados de su posición actual antes de colocarlos según sea necesario. Necesitamos el método de clonación para copiarlos primero.

Hacemos esto para asegurarnos de que cuando nos acercamos a las últimas miniaturas, permanece la ilusión de un carrusel infinito. De lo contrario, el usuario solo ve bloques vacíos que no es realmente lo que necesitamos.

Haciéndolo girar automáticamente

Hacer que el widget gire automáticamente es realmente muy simple. Dado que tenemos un controlador de eventos adecuado en su lugar, solo tenemos que llamar al controlador cada n microsegundos. La siguiente línea se encargará de eso:

En el código anterior, pedí llamar a la función de tamizado cada ocho segundos. Recuerda, la duración se transmite en microsegundos, por lo que n mil es igual a n segundos.

Inicializando el widget

Actualmente, la página se carga con el widget sin inicializar. Necesitaremos rectificar esto. Todo lo que tenemos que hacer es llamar a la función show pasando en la posición inicial como parámetro.

Después de haber adjuntado el controlador de eventos, agrega esto:

El código final

¡Y hemos terminado! El código final se ve así:

Conclusión

Y ahí lo tienes: hemos creado un control deslizante simple pero útil. Espero que hayas encontrado este tutorial interesante y útil.  Siéntate libre de reutilizar este código en otras partes de tus proyectos y participa en los comentarios si tienes dificultades.

¿Preguntas? Cosas bonitas que decir? Críticas? Presiona la sección de comentarios y déjame un comentario. ¡Feliz codificación!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.