Learn how to make interactive image sliders in Elementor with a step-by-step guide.

Steps to Make Clickable Image Sliders in Elementor


Table of Contents


If you’re looking to enhance the visual appeal and interactivity of your website, clickable image sliders are an excellent tool to consider. Coupled with Elementor, a popular page builder for WordPress, you can create captivating sliders that engage your audience and drive conversions.

Understanding Elementor

Elementor is a drag-and-drop page builder plugin for WordPress that allows users to design stunning websites without any coding knowledge. Its intuitive interface and extensive library of widgets make it a favorite among both beginners and experienced web designers.

Elementor offers various carousel elements, including:

  • Image
  • Flip
  • Post
  • Testimonial Slider
  • Loop
  • Slides
  • Media
  • Testimonial

However, none of these provide the functionality where clicking the image seamlessly transitions to the next one. Instead, users typically navigate using arrows or dots, or by dragging the image.

What are Clickable Image Sliders?

Clickable image sliders, also known as image carousels, are dynamic elements commonly found on websites. They display a series of images or slides that users can navigate through by clicking on arrows or buttons. Clickable image sliders serve multiple purposes, including showcasing products, highlighting portfolio items, or telling a visual story.

Why Use Clickable Image Sliders in Elementor?

Integrating clickable image sliders into Elementor designs offers several advantages. Firstly, it adds visual interest and dynamism to web pages, capturing visitors’ attention and encouraging them to explore further. Additionally, image sliders can efficiently utilize space on the page, allowing you to showcase multiple pieces of content in a compact format.

Steps to Create Clickable Image Sliders in Elementor

Step 1: Adding HTML Code

To implement this solution, you’ll need to add a snippet of HTML code. Here’s how:

Navigate to the HTML code box within Elementor.

Insert the provided HTML code into the designated area. Here’s the complete code that you can copy and paste:

					<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Slider with Invisible Arrows</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
#slider-container {
  position: relative;
  width: 1000px; /* Adjust width as necessary */
  height: 500px; /* Adjust height as necessary */
  overflow: hidden;

.slide {
  width: 50%;
  height: 100%;
  display: none; /* Hide all slides initially */
  position: absolute;
  top: 0;
  left: 0;

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images cover the slide area */

.active {
  display: block; /* Only active slide visible */

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 100px;
  color: transparent; /* Make arrow invisible */
  user-select: none;
  text-align: center;
  width: 100%;

.next {
  right: 0; /* Adjust the position of the right arrow */
<body data-rsssl=1>

<div id="slider-container">
  <div class="slide active"><img decoding="async" src="https://elementorpro.watchmebuildsites.com/wp-content/uploads/2024/04/modely-75.jpg">Slide 1</div>
  <div class="slide"><img decoding="async" src="https://elementorpro.watchmebuildsites.com/wp-content/uploads/2024/04/tesla_model_y_zakelijk_leasen_activlease.jpg">Slide 2</div>
  <div class="slide"><img decoding="async" src="https://elementorpro.watchmebuildsites.com/wp-content/uploads/2024/04/thumb-1920-998859.jpg">Slide 3</div>
  <div class="slider-arrow next">&#10095;</div> <!-- Only the right arrow -->

$(document).ready(function() {
  var currentIndex = 0;
  var slides = $('.slide');
  var totalSlides = slides.length;

 function switchSlide(newIndex) {
    currentIndex = newIndex;

 function nextSlide() {
    var newIndex = (currentIndex + 1) % totalSlides;
    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
    sliderWrapper.style.transform = `translateX(-${slideWidth * (currentIndex + 1)}px)`;

function transitionEnd() {
    if (currentIndex === totalSlides + 1) {
      currentIndex = 1;
      sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
      sliderWrapper.style.transform = `translateX(-${slideWidth * currentIndex}px)`;
    if (currentIndex === 0) {
      currentIndex = totalSlides;
      sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
      sliderWrapper.style.transform = `translateX(-${slideWidth * currentIndex}px)`;


 // Auto slide every 3 seconds
  var autoSlideInterval = setInterval(nextSlide, 5000);

 // Pause auto slide on hover
    function() {
    function() {
      autoSlideInterval = setInterval(nextSlide, 5000);

Step 2: Understanding the Code

Now, let’s break down the key components of the HTML code:

This line ensures that our jQuery functions are executed only when the webpage is fully loaded.


This function manages the transition between slides. When a user clicks, it switches the ‘active’ class from one slide to the next, providing a seamless transition effect.


This function is triggered when the right arrow is clicked. It determines the next slide, activates it using switchSlide(), and smoothly transitions it into view.

					$(document).ready(function() {...});. 

Step 3: Utilizing Invisible Arrows

Invisible arrows are included in the code but hidden using CSS. When clicked, they trigger the transition to the next slide, offering a user-friendly navigation experience.

Step 4: Auto-Slide Feature

The slideshow includes an auto-slide feature that transitions to the next slide every 5 seconds. However, hovering over the slideshow pauses the auto-slide until the user resumes interaction.

Step 5: Customization Options

To replace images or adjust their sizes within the slider:

Modify the HTML part by replacing the image source (src) attribute with the URL of your desired image.

Adjust the CSS properties within the slide class to customize the image size and slide container dimensions.

Best Practices for Designing Clickable Image Sliders

When creating clickable image sliders in Elementor, keep the following best practices in mind:

  • Choose high-quality images that are relevant to your content.
  • Keep text on slides concise and easy to read.
  • Utilize animations and transitions judiciously to enhance user experience without overwhelming them.

Testing and Troubleshooting

Before finalizing your clickable image slider, thoroughly test it on different devices and browsers to ensure it displays correctly and functions smoothly. Address any issues related to responsiveness or compatibility promptly to provide a seamless user experience.

Examples of Effective Clickable Image Sliders

Take inspiration from websites that effectively utilize clickable image sliders in Elementor designs. Analyze what elements make these sliders engaging and consider incorporating similar strategies into your own designs.


Clickable image sliders are powerful tools for enhancing the visual appeal and interactivity of your website. By following the steps outlined above and implementing best practices, you can create compelling sliders that captivate your audience and drive engagement.

Check out our video tutorial for an easy way to learn!

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer