Categorías
WordPress

Como crear un slider en WordPress con Elementor

Elementor es un page builder en WordPress con muchas facilidades para crear y estructurar contenido, sin embargo, de momento no es posible crear un una sección que actúe como slider en la que puedas añadir contenido como a cualquier otra sección; al menos de forma nativa, por lo que acá explicaré la forma en la que yo lo implementé recientemente.

Antes de recurrir a mi propia solución intenté utilizar el widget de slides nativo de Elementor, sin embargo, limitaba mucho el potencial ya que no se comporta como una sección por lo que no es posible colocar más elementos dentro. También evalué utilizar un plugin como Smart Slider que podría funcionar aunque como resultado perdería toda la ventaja del editor visual de Elementor ya que tendría que recurrir a utilizar shortcodes para incrustar el slider previamente creado por lo que también descarté esta opción. Utilizar un paquete de widgets suponía un coste adicional y muchas funcionalidades innecesarias que en lo personal siempre trato de evitar.

Terminé utilizando un slider de código abierto para jQuery, Owl Carousel, el cual me parece muy sencillo y ligero así que manos a la obra.

Lo principal sería incluir los archivos del slider. En mi caso utilicé un plugin de WordPress que facilita bastante el incluir pequeñas porciones de código, Code Snippets, aunque puedes incorporar el código directamente en tu archivo functions.php.

add_action( 'wp_head', function () { ?>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"> </script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" media="all">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" media="all">
	<script>
		jQuery(document).ready(function(){
		  jQuery(".owl-carousel").owlCarousel({
                           // Elementos inserta elementos HTML que se atraviesan entre la sección y sus sub-secciones, owl-slider por defecto actúa sobre los elementos hijo inmediatos del selector por lo que hay que específicar el elemento padre directo de dichas sub-secciones.
			  'nestedItemSelector':'elementor-inner-section', 
			  'items': 1,
			  'autoplay': true,
			  'dots': true
		  });
		});
	</script>
<?php } );

Esto hará que cualquier sección con la clase owl-slider se convierta en un slider. Ahora tenemos que añadir dicha sección a nuestra página de Elementor:

Como pueden ver, cada sección interior representa un slide. En la previsualización de Elementor el slider no funcionará, una vez vayan a la vista de la página el slider debería estar funcionando sin problemas. Les recomiendo mirar la documentación de owl-slider para saber como cambiar sus propiedades y adaptarlo al diseño que necesiten. Esto debería funcionar con cualquier otro slider que tenga un mecanismo similar.