Cómo crear un carrusel de imágenes de portafolios con controles deslizantes sincronizados en una página web

Introducción

Al crear un sitio web profesional, el uso de un carrusel de imágenes para mostrar su portafolio mostrará su experiencia con el desarrollo front-end de una manera divertida y creativa. Este tutorial lo guiará a través de los pasos esenciales para crear y diseñar este componente de página web. Escribirá el HTML, lo diseñará con CSS y usará JavaScript para hacer que la página sea dinámica. También usará la biblioteca MomentumSlider para crear su efecto de control deslizante.

Un ejemplo del tipo de efecto carrusel que buscamos es el siguiente:

Nota: Este diseño original pertenece a Francesco Zagami, y está publicado en Dribbble.

Planificación

Antes de lanzarnos a desarrollar el diseño, debemos pensar cómo vamos a llevarlo a cabo, teniendo en cuenta la tecnología de la que disponemos.

En este caso, observando atentamente el diseño, podemos ver que el Carrusel de Portafolio está compuesto por cuatro controles deslizantes independientes (imágenes, números, títulos y enlaces) que están todos sincronizados.

Teniendo esto en cuenta, podemos utilizar la librería MomentumSlider sin problemas, ya que permite sincronizar uno o varios sliders a un slider principal. Las imágenes podrían tomarse como slider principal, permitiendo sincronizar los demás (números, títulos y enlaces).

Paso 1: Creación de la estructura HTML

Nuestro código HTML será mínimo, ya que todos los controles deslizantes se generarán a partir de JavaScript con la ayuda de la biblioteca MomentumSlider. Por lo tanto, nuestro marcado será el siguiente:

!-- Container for all sliders and pagination --main    !-- Here sliders will be injected for images, numbers, titles, and links --/main

Ten en cuenta que no hemos incluido el resto de elementos decorativos que verás en la demo final, para centrarnos en el código de Portfolio. De la misma forma, no incluiremos el código CSS correspondiente a estos elementos decorativos, lo que sin duda hará este tutorial más comprensible y fácil de seguir.

En cualquier caso, siempre puedes consultar el código completo en el repositorio de Github.

Paso 2: Agregar estilos usando la combinación MomentumSlider

Incluso antes de tener nuestros sliders en HTML (porque se generarán dinámicamente con JavaScript), ya podemos definir algunos estilos para ellos. Para ello, utilizaremos el nuevo mixin SCSS que ofrece la biblioteca MomentumSlider.

El mixin SCSS para generar los estilos CSS básicos de cualquier control deslizante creado con MomentumSlider se puede encontrar en la ruta scss/_ms-mixin.scssy puede recibir los siguientes parámetros:

• $cssClass:Clase CSS para que coincida con el contenedor del control deslizante.
• $slider-length:Longitud (ancho o alto) del contenedor deslizante.
• $slider-center:Si el control deslizante debe estar centrado.
• $slide-width:Ancho fijo para cada diapositiva.
• $slide-height:Altura fija para cada diapositiva.
• $vertical:Si el control deslizante debe ser vertical (verdadero) u horizontal (falso).
• $reverse:Si el control deslizante debería tener diapositivas invertidas (primeros elementos al final).
• $debug:Muestra colores de fondo útiles para facilitar la depuración.

Un ejemplo, utilizando los valores predeterminados, sería el siguiente:

@import "ms-mixin";@include ms(  $cssClass: 'ms-container',  $slider-length: 400px,  $slider-center: false,  $slide-width: 90px,  $slide-height: 90px,  $vertical: false,  $reverse: false,  $debug: false);

Todos los parámetros son opcionales, utilizando los valores anteriores por defecto.

Este mixin le da estilo a nuestros controles deslizantes. Veamos cómo se vería el código SCSS para nuestro control deslizante principal (imágenes):

@import "ms-mixin";// Images$ms-images-slide-width: 700px;$ms-images-slide-height: 400px;// Using SCSS mixin to generate the final CSS code for the slider@include ms(  $cssClass: 'ms--images', // CSS class to match the slider container  $slider-length: 100%,    // The slider container will have full width  $slider-center: false,   // Don't need to center it, as it is full width  $slide-width: $ms-images-slide-width,   // Fixed width for each slide  $slide-height: $ms-images-slide-height, // Fixed height for each slide  $vertical: false, // The slider should be horizontal  $reverse: false,  // Normal order  $debug: false     // No debug backgrounds in production);

Quizás hayas notado que hay varios parámetros innecesarios, ya que son iguales a los valores por defecto. Sin embargo, se recomienda escribir todos los parámetros para evitar consultar el código del mixin.

También ten en cuenta que al inicio, para definir la posición y dimensiones de nuestro slider, es recomendable definir el parámetro $debug: true, pues esto generará colores de fondo útiles para cada elemento de nuestro slider.

Paso 3: inicialización del control deslizante con JavaScript

Con todos los estilos básicos definidos, podemos inicializar nuestro control deslizante principal (para las imágenes) de la siguiente manera:

// Initializing the images slidervar msImages = new MomentumSlider({    // Element to append the slider    el: '.sliders-container',    // CSS class to reference the slider    cssClass: 'ms--images',    // Generate the 4 slides required    range: [0, 3],    rangeContent: function () {        return 'divdiv/div/div';    },    // Synchronize the other sliders    sync: [msNumbers, msTitles, msLinks],    // Styles to interpolate as we move the slider    style: {        '.ms-slide__image': {            transform: [{scale: [1.5, 1]}]        }    }});

Como se muestra en este código, el syncparámetro recibe un Arraycon instancias de otros controles deslizantes que queremos sincronizar con el nuevo control deslizante que estamos creando. Debes haber inicializado previamente esos controles deslizantes.

Paso 4: Personalización de estilos

Una vez que el control deslizante de imágenes funcione correctamente, podemos agregar los demás estilos necesarios para que nuestro carrusel de portafolios se parezca al diseño original:

// Custom styles for images slider.ms--images {  left: calc(50% - #{$ms-images-slide-width / 2 - 70px});  .ms-container--horizontal .ms-track {    left: -70px;  }  // Slides images  .ms-slide {    :nth-child(1) .ms-slide__image {      background-image: url('../portfolio-carousel/img/harvey-gibson-498362-unsplash.jpg');    }    :nth-child(2) .ms-slide__image {      background-image: url('../portfolio-carousel/img/andre-hunter-461305-unsplash.jpg');    }    :nth-child(3) .ms-slide__image {      background-image: url('../portfolio-carousel/img/joanna-nix-389128-unsplash.jpg');    }    :nth-child(4) .ms-slide__image {      background-image: url('../portfolio-carousel/img/jurica-koletic-321003-unsplash.jpg');    }  }  .ms-slide__image-container {    width: 80%;    height: 80%;    background-color: rgba(0, 0, 0, 0.3);    overflow: hidden;  }  .ms-slide__image {    width: 100%;    height: 100%;    background-size: cover;  }}

Una de las principales ventajas de MomentumSlider es que nos permite modificar los estilos CSS de nuestro slider según nuestras necesidades sin afectar a sus funcionalidades. Podemos añadir estilos de todo tipo, siempre y cuando tengamos cuidado de no sobrescribir las dimensiones de los slides.

Paso 5: Agregar paginación

La biblioteca ofrece varias funcionalidades listas para usar, pero si queremos un componente de paginación debemos implementarlo nosotros mismos.

Este será el código HTML que utilizaremos, con un elemento por cada diapositiva:

!-- Pagination for the slider --ul    lia/a/li    lia/a/li    lia/a/li    lia/a/li/ul

En este caso no detallaremos el código CSS necesario para que nuestro componente de paginación luzca como el diseño. En su lugar, veamos el código JavaScript para que funcione correctamente:

// Get pagination itemsvar pagination = document.querySelector('.pagination');var paginationItems = [].slice.call(pagination.children);// Update initialization for images slidervar msImages = new MomentumSlider({    // MORE OPTIONS    // Update pagination if slider change    change: function(newIndex, oldIndex) {        if (typeof oldIndex !== 'undefined') {            paginationItems[oldIndex].classList.remove('pagination__item--active');        }        paginationItems[newIndex].classList.add('pagination__item--active');    }});// Select corresponding slider item when a pagination button is clickedpagination.addEventListener('click', function(e) {    if (e.target.matches('.pagination__button')) {        var index = paginationItems.indexOf(e.target.parentNode);        msImages.select(index);    }});

Paso 6: Cómo hacerlo responsivo

Para que nuestro carrusel de portafolios se vea bien en pantallas pequeñas, arreglemos algunas posiciones y solucionemos algunos problemas menores:

// Responsive styles@media screen and (max-width: 860px) {  .ms--numbers {    left: calc(50% - #{$ms-numbers-slide-width / 2});  }  .ms--titles {    left: calc(50% - #{$ms-titles-slide-width / 2});    top: calc(50% - #{$ms-titles-slide-height / 2 + 50px});    text-align: center;  }  .ms--links {    left: calc(50% - #{$ms-links-slide-width / 2});    top: calc(50% + #{$ms-links-slide-height / 2 + 50px});  }  .pagination {    left: 50%;    top: calc(100% - 50px);    transform: translateX(-50%);  }}@media screen and (max-width: 600px) {  .ms--images {    overflow: visible;  }}@media screen and (max-width: 400px) {  .ms--titles {    .ms-slide {      transform: scale(0.8);    }  }}

Ahora nuestro carrusel de portafolios se ve genial en pantallas de cualquier tamaño.

Conclusión

Durante este tutorial, hemos visto los elementos esenciales para crear un carrusel de portafolios elegante.

Puedes ver el resultado final, así como la demostración de CodePen.