This guide will walk you through the process of creating a custom slider in Elementor without using any additional plugins. All work happens directly in Elementor’s builder, using CSS classes added via the Advanced tab and a simple HTML widget to control navigation. Follow these steps to implement the slider effectively.
Table of Contents
Step 1: Create Your Hero Sections (Slide 1, Slide 2, Slide 3)
- Design your hero sections inside Elementor as usual. These will be your slides (Slide 1, Slide 2, and Slide 3).
- For each section or container that you wish to turn into a slider, assign the following CSS Class under the Advanced tab:
- For Slide 1, Slide 2, and Slide 3, assign the class
slider1to each section. All sections will share this same class.
Note: Once the CSS class
slider1is applied, all the designed hero sections will automatically merge into the slider functionality. Ensure the designs for each slide are finalized before adding the CSS class. - For Slide 1, Slide 2, and Slide 3, assign the class
Step 2: Create the Slider Wrapper in Elementor
In the Navigator, you should structure your containers as shown in the screenshot below:
- Wrapper: This will act as the main container for your slider. Go to its Advanced tab and add the CSS Class
slider-wrapper. - Individual Slides: As noted earlier, the individual slides should be inside this wrapper and should have the
slider1class.
Your structure should look like this:
|
1 2 3 4 5 6 |
Hero └── parent └── Wrapper (CSS Class: slider-wrapper) └── slider1 (CSS Class: slider1) └── slider1 (CSS Class: slider1) └── slider1 (CSS Class: slider1) |
Step 3: Add the Navigation Dots in Elementor
- Add a HTML widget inside your slider wrapper, and paste the following HTML code to generate the navigation dots:
|
1 2 3 4 5 6 |
<!-- Navigation indicators (dots) --> <ul class="slider-dots"> <li class="slider-dot" data-slide-index="0"></li> <li class="slider-dot" data-slide-index="1"></li> <li class="slider-dot" data-slide-index="2"></li> </ul> |
Step 4: Add Custom CSS in Elementor
The following CSS should be applied globally or within the specific page where your slider exists. The CSS ensures that the wrapper displays the slides correctly and only one slide is visible at a time.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* Wrapper holding all the slides */ .slider-wrapper { perspective: 1000px; overflow: hidden; position: relative; width: 100%; height: 400px; /* Adjust this height based on your design */ } /* Each individual slide (these share the class slider1) */ .slider1 { width: 100%; height: 100%; display: none; /* Initially hide all slides */ } /* Show only the first slide by default */ .slider1:first-child { display: flex; /* Show first slide */ } /* Navigation Dots */ .slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; list-style: none; padding: 0; margin: 0; } .slider-dot { width: 10px; height: 10px; background-color: #888; border-radius: 50%; margin: 0 5px; cursor: pointer; } .slider-dot.active { background-color: #333; } |
Step 5: Add Custom JavaScript
To make your slider functional, add the following JavaScript. Since we are working entirely inside Elementor, this JavaScript should be added via a Custom HTML widget (or through the Custom Code feature if you have Elementor Pro):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script> document.addEventListener('DOMContentLoaded', function() { // Select all containers with the class 'slider1' const slides = document.querySelectorAll('.slider1'); const dots = document.querySelectorAll('.slider-dot'); let currentSlide = 0; // Function to show a specific slide function showSlide(index) { slides.forEach(slide => { slide.style.display = 'none'; // Hide all slides }); slides[index].style.display = 'flex'; // Show the selected slide } // Function to activate the correct navigation dot function setActiveDot(index) { dots.forEach(dot => { dot.classList.remove('active'); // Remove 'active' from all dots }); dots[index].classList.add('active'); // Add 'active' to the correct dot } // Automatically move to the next slide function nextSlide() { currentSlide = (currentSlide + 1) % slides.length; showSlide(currentSlide); setActiveDot(currentSlide); } // Show the first slide and activate the first dot showSlide(currentSlide); setActiveDot(currentSlide); // Automatically transition to the next slide every 3 seconds setInterval(nextSlide, 3000); // Handle dot click event to navigate to specific slide dots.forEach((dot, index) => { dot.addEventListener('click', function() { currentSlide = index; showSlide(currentSlide); setActiveDot(currentSlide); }); }); // Handle swipe gesture for touch devices let startX = 0; document.querySelector('.slider-wrapper').addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; }); document.querySelector('.slider-wrapper').addEventListener('touchend', (e) => { const endX = e.changedTouches[0].clientX; if (startX > endX + 50) { nextSlide(); // Swipe left, go to next slide } else if (startX < endX - 50) { currentSlide = (currentSlide - 1 + slides.length) % slides.length; showSlide(currentSlide); setActiveDot(currentSlide); } }); }); </script> |
Conclusion
With this process, you can turn any Elementor container or section into a fully functional slider without relying on third-party plugins. Remember to:
- Design your slides first (e.g., Hero sections).
- Assign the CSS Class
slider-wrapperto the container holding your slides. - Add the CSS Class
slider1to each slide’s container through Elementor’s Advanced tab. - Ensure the HTML, CSS, and JavaScript are properly added in Elementor widgets for the slider to work.
