Categories
WordPress

Creating a slider in WordPress with Elementor

Elementor is a page builder for WordPress that offers many tools to create content, however it isn’t possible to create a section that behaves like a slider, at least not without tinkering a little.

I first tried to use the native slides widget of Elementor, which comes with the downside of limiting the content you put into it since it can’t have inner elements like regular sections. I also tried to use a plugin like Smart Slider which would work at the cost of losing the visual editing capabilities of Elementor because these plugins usually work with shortcodes and their own editors.

I ended up using an open source slider for jQuery, Owl Carousel, which is simple and lightweight.

First step would be importing the slider files. I used Code Snippets plugin to add the code, however you can add it directly to your theme’s 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({
                           // Elementor inserts HTML elements across the section and it's children, which is a problem since owl-slider acts by default on the immediate children of the selector. To overcome this, we specify the actual parent element of the slides.
			  'nestedItemSelector':'elementor-inner-section', 
			  'items': 1,
			  'autoplay': true,
			  'dots': true
		  });
		});
	</script>
<?php } );

This will turn any section with the .owl-slider class into a slider. Now let’s add one slider section to our Elementor page:

As you can see, each inner section element represents a slide. It won’t be visible in the Elementor preview, once you go to the page the slider should be working.

To further customize the slider take a look at the owl-slider docs. This approach should work with any other slider plugin.