How To Turn Anything Into A Slider In Elementor For Free (No Plugin)

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.

Step 1: Create Your Hero Sections (Slide 1, Slide 2, Slide 3)

1. Design your hero sections inside Elementor as usual. These will be your slides (Slide 1, Slide 2, and Slide 3).
2. 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 slider1 to each section. All sections will share this same class.

   Note: Once the CSS class slider1 is 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.

Step 2: Create the Slider Wrapper in Elementor

In the Navigator, you should structure your containers as shown in the screenshot below:

1. Wrapper: This will act as the main container for your slider. Go to its Advanced tab and add the CSS Class slider-wrapper.
2. Individual Slides: As noted earlier, the individual slides should be inside this wrapper and should have the slider1 class.

Your structure should look like this:

Hero
  └── parent
        └── Wrapper (CSS Class: slider-wrapper)
              └── slider1 (CSS Class: slider1)
              └── slider1 (CSS Class: slider1)
              └── slider1 (CSS Class: slider1)

<!-- 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.

/* 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):

<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-wrapper to the container holding your slides.
• Add the CSS Class slider1 to 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.