Ticker

6/recent/ticker-posts

Ad Code

Responsive Advertisement

Crear Carrusel con Enlaces Independientes en Elementor

Crear Carrusel con Enlaces Independientes en Elementor

Desde Elementor en sus variedad de módulos tenemos disponible el famoso carrusel de imagenes el cual nos permite colocar un numero finito de imagenes y que las mismas puedan ser visualizadas en modo de Lightbox, pero ¿Qué sucede si requerimos que cada imagen tenga un enlace especifico?.

Lamentablemente el modulo solo permite agregar un enlace global que se aplica para todas las imagenes sin embargo en esta ocasión vamos a validar como podemos aplicar enlaces independientes para cada imagen en el carrusel y no solo plantearemos un caso sino dos para que puedas escoger cual es mas practico acorde al caso de tus necesidades

  Por medio de Código


Para recrear el ejemplo vamos a crear un carrusel desde el modulo carrusel de imagenes y vamos a incluir 5 imagenes de stock.

Ahora por medio de un código en JS en combinación con la asignación de clases de CSS vamos a lograr estipular enlaces específicos a cada imagen, para ello primero que nada con nuestro carrusel creado vamos a añadir el modulo de HTML

Una vez incluido vamos a añadir dentro del modulo el siguiente código:


<style>.swiper-slide-image{cursor: pointer;} </style>

<script>
document.addEventListener('DOMContentLoaded', function () {

/* Modifica los enlaces en orden de las imagenes */
let links = [
    'http://webempresa.com/',
    'https://www.webempresa.com/blog.html',
    'https://www.webempresa.com/university/',
    'https://www.webempresa.com/foro/',
    'https://www.youtube.com/user/webempresa?sub_confirmation=1',
];

document.body.addEventListener('click', function (e) {
    if (e.target.closest('.carousel1 .swiper-slide')){
    let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index");
    if (links[i].length > 2){
    window.open(links[i]);
    }
    }
});
});
</script>

El codigo presentado tiene 3 elementos importantes que vale la pena destacar.

  1. El estilo CSS que le otorgara la propiedad al cursor de que cambie de forma al momento de que se desplace sobre las imagenes dando la sensación de que en efecto tiene un enlace y puede ser clickeado
  2. La primera parte del script que contiene el listado de los links que corresponden a los que se le serán asignados a las imagenes, es necesario considerar que cada enlace debe tener el orden acorde a la imagen a la que se desea enlazar, esto quiere decir que el primer enlace será asignado a la primera imagen y asi sucesivamente
  3. La segunda parte del script es una función definida para que se ejecute la acción onclick en cada imagen y se aperture dicho enlace

Una vez listo nuestro código y cambiados los enlaces acorde al numero de imagenes que tendrá nuestro carrusel vamos a proseguir a añadir una clase al modulo del carrusel desde la pestaña avanzado, la clase en este caso la determinaremos como “carousel1”.

Guardamos cambios y validamos el funcionamiento validando que cada imagen tenga asignada el enlace que le corresponde.

Por ultimo pero no menos importante, actualmente nuestros enlaces están abriendo en una pestaña nueva, que sucede si queremos que abra en la pestaña actual, pues es necesario remplazar la siguiente linea de código:


window.open(links[i]);

Con lo siguiente


location = links[i];

  Por medio de Plugin


Si la opción anterior te parece muy engorrosa vamos a validar otra alternativa que es por medio de un plugin gratuito el cual se llama “Custom links in Elementor Image Carousel” el cual nos permite asignar enlaces personalizados a cada imagen que incluyamos en el modulo de carrusel de imagenes de Elementor.

Custom links in Elementor Image Carousel

Una vez instalado solo podremos visualizar las nuevas opciones al momento de añadir nuestras imagenes al modulo de carrusel de imagenes.

En la edición de la galería al seleccionar una imagen además de los campos convencionales que aparecen en el extremo lateral derecho vamos a ver un par de opciones extras, las cuales delimitan lo siguiente:

  • Custom Link: El enlace que va a tener asignado la imagen correspondiente
  • Open in new tab: Al activarlo permite que el enlace se abra en una pestaña nueva

Solo basta con asignar los enlaces que queramos a cada una de las imagenes y listo, simple y sencillo.

  Conclusiones


Hemos podido apreciar que pese a que los módulos de Elementor son bastante prácticos si que aun le faltan algunas opciones mas para potenciar nuestros desarrollos web, en este caso por medio de un código concreto o un plugin ligero le hemos agregado una funcionalidad extra al modulo de carrusel de imagenes que debería ser imprescindible.

En artículos anteriores hemos visto como podemos aplicarle efectos al mismo modulo de carrusel de imagenes, lo que significa que con un poco de esfuerzo podemos ir mas allá del limite aparente que nos presentan los maquetadores de la actualidad.

Si deseas conocer mas sobre Elementor, como utilizarlo y como sacarle provecho te sugiero echarle un vistazo a los siguientes enlaces de interés

La entrada Crear Carrusel con Enlaces Independientes en Elementor se publicó primero en Webempresa.

Enregistrer un commentaire

0 Commentaires