WP Before After Image Slider jQuery CodePen: WordPress Tutorial

A WP before after image slider jQuery CodePen example is one of the easiest ways to test an image comparison slider before adding it to a WordPress website. Whether you are building a photography portfolio, renovation case study, beauty clinic website, product comparison section, or design showcase, a before-after slider helps visitors compare two images in a simple visual way.

Instead of showing two separate images side by side, a before-after image slider lets users drag a handle to reveal the “before” and “after” versions in the same frame. This makes the difference easier to understand and more engaging for website visitors.

In this guide, you will learn how to create a responsive before after image slider using HTML, CSS, jQuery, and CodePen-style code, then add it to WordPress. You will also learn how to use it with Gutenberg, Elementor, custom shortcode methods, and plugin alternatives.

By the end, you will know how to:

• Create a before after image slider with HTML, CSS, and jQuery
• Test the slider in CodePen
• Add the slider to a WordPress page or post
• Make the slider responsive and mobile-friendly
• Use the slider in Gutenberg and Elementor
• Fix common WordPress jQuery slider issues
• Decide whether custom code or a WordPress plugin is better for your site

What Is a WP Before After Image Slider?

A WP before after image slider is an image comparison tool that lets users compare two images by dragging a slider handle. One image usually shows the “before” version, and the other image shows the “after” version.

For example, you can use it to compare:

• A room before and after renovation
• A face before and after skincare treatment
• A website before and after redesign
• A product before and after editing
• A photo before and after color correction
• A property before and after staging
• A design mockup before and after improvement

The main benefit is that users do not need to look at two separate images and guess the difference. They can drag the handle and see the change directly.

A before after image slider WordPress code solution is useful when you want more control over the design, layout, and behavior of the slider. However, a plugin can be better when you want a faster no-code setup.

Why Use jQuery and CodePen for a Before After Image Slider?

A before after image slider jQuery CodePen example is useful because it allows you to test the slider outside WordPress before adding it to your website.

CodePen is commonly used by developers and designers to test HTML, CSS, and JavaScript snippets. You can build the slider, check how it works, adjust the design, and then move the final code into WordPress.

Using jQuery is helpful because WordPress already includes jQuery by default. That means you can often build interactive WordPress elements without loading a large extra JavaScript library.

A jQuery before after image comparison slider is especially useful when you want:

• A lightweight custom slider
• A draggable comparison handle
• Full control over HTML and CSS
• A CodePen-style demo before WordPress setup
• A responsive slider for desktop and mobile
• A slider without installing another plugin

However, you need to add the code correctly in WordPress. A slider that works in CodePen may not work in WordPress if the jQuery is not wrapped properly, the image URLs are wrong, or the theme has conflicting CSS.

Complete Before After Image Slider CodePen Example

Below is a simple responsive before after image slider using HTML, CSS, and jQuery. You can test this in CodePen first, then move it into WordPress.

This version is designed to be more flexible than fixed-width examples. It uses a percentage-based slider position, so it works better on different screen sizes.

HTML Code

<div class="cc-before-after-slider">
  <div class="cc-before-after-wrapper">
    <img 
      src="https://yourwebsite.com/wp-content/uploads/before-image.jpg" 
      alt="Before image" 
      class="cc-before-img"
    >

    <div class="cc-after-layer">
      <img 
        src="https://yourwebsite.com/wp-content/uploads/after-image.jpg" 
        alt="After image" 
        class="cc-after-img"
      >
    </div>

    <div class="cc-slider-line">
      <span class="cc-slider-handle"></span>
    </div>
  </div>

  <div class="cc-before-after-labels">
    <span>Before</span>
    <span>After</span>
  </div>
</div>

CSS Code

.cc-before-after-slider {
  width: 100%;
  max-width: 900px;
  margin: 30px auto;
  font-family: Arial, sans-serif;
}

.cc-before-after-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  cursor: ew-resize;
  user-select: none;
}

.cc-before-after-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.cc-before-img {
  position: relative;
  z-index: 1;
}

.cc-after-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.cc-after-img {
  height: 100%;
  width: auto;
  max-width: none;
}

.cc-slider-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: #ffffff;
  z-index: 3;
  transform: translateX(-50%);
}

.cc-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.cc-slider-handle::before,
.cc-slider-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
}

.cc-slider-handle::before {
  left: 12px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 8px solid #333333;
}

.cc-slider-handle::after {
  right: 12px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 8px solid #333333;
}

.cc-before-after-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-weight: 600;
  color: #333333;
}

@media (max-width: 600px) {
  .cc-slider-handle {
    width: 38px;
    height: 38px;
  }

  .cc-before-after-labels {
    font-size: 14px;
  }
}

jQuery Code

jQuery(document).ready(function ($) {
  $(".cc-before-after-wrapper").each(function () {
    const $wrapper = $(this);
    const $afterLayer = $wrapper.find(".cc-after-layer");
    const $sliderLine = $wrapper.find(".cc-slider-line");

    let isDragging = false;

    function moveSlider(clientX) {
      const wrapperOffset = $wrapper.offset().left;
      const wrapperWidth = $wrapper.width();
      let position = ((clientX - wrapperOffset) / wrapperWidth) * 100;

      position = Math.max(0, Math.min(100, position));

      $afterLayer.css("width", position + "%");
      $sliderLine.css("left", position + "%");
    }

    $wrapper.on("mousedown touchstart", function (e) {
      isDragging = true;

      const clientX = e.type === "touchstart"
        ? e.originalEvent.touches[0].clientX
        : e.clientX;

      moveSlider(clientX);
    });

    $(document).on("mousemove touchmove", function (e) {
      if (!isDragging) return;

      const clientX = e.type === "touchmove"
        ? e.originalEvent.touches[0].clientX
        : e.clientX;

      moveSlider(clientX);
    });

    $(document).on("mouseup touchend", function () {
      isDragging = false;
    });
  });
});

This code creates a simple draggable before-after slider. The after image is placed on top of the before image, and the visible width changes as users drag the handle.

How the jQuery Before After Image Slider Works

The slider works with three main layers:

1. The before image
2. The after image layer
3. The draggable slider handle

The before image stays visible in the background. The after image is placed above it inside a container with overflow: hidden. When the user drags the handle, jQuery changes the width of the after image container.

For example, when the slider position is 50%, half of the after image is visible. When the slider moves to 80%, more of the after image appears. When it moves to 20%, more of the before image is visible.

This is why it is important to use two images with the same dimensions. If the before and after images have different sizes, the comparison may look broken or misaligned.

How to Test the Before After Image Slider in CodePen

Before adding the slider to WordPress, test it in CodePen or any local HTML editor.

Follow these steps:

1. Create a new Pen in CodePen.
2. Paste the HTML code into the HTML panel.
3. Paste the CSS code into the CSS panel.
4. Paste the jQuery code into the JavaScript panel.
5. Add jQuery from CodePen’s JavaScript settings.
6. Replace the image URLs with your own before and after images.
7. Test the slider on desktop and mobile screen sizes.

Testing the image comparison slider in CodePen helps you confirm that the HTML, CSS, and jQuery are working before you move the code into WordPress.

This is especially useful because a CodePen slider may work perfectly in the editor but need small adjustments when added to WordPress themes, page builders, or custom layouts.

How to Add the jQuery Before After Slider in WordPress

Once your CodePen demo works, you can add the same before after image slider to WordPress.

There are several ways to do this:

• Add HTML in the WordPress Custom HTML block
• Add CSS in Additional CSS
• Add jQuery through a code snippets plugin
• Add the slider in Elementor using the HTML widget
• Add the slider through a custom shortcode
• Use a WordPress before after image slider plugin

The best method depends on your technical comfort level and how many sliders you want to add.

Method 1: Add the Slider in WordPress Using Custom HTML Block

This is the simplest no-plugin custom code method.

Step 1: Upload Your Before and After Images

Go to:

WordPress Dashboard → Media → Add New

Upload both images. Try to use images with the same width and height. For example:

• before-image.jpg — 1200 x 800 px
• after-image.jpg — 1200 x 800 px

After uploading, copy each image URL from the Media Library.

Step 2: Add the HTML to a Page or Post

Open the WordPress page or post where you want to show the slider.

Add a Custom HTML block and paste the HTML code:

<div class="cc-before-after-slider">
  <div class="cc-before-after-wrapper">
    <img 
      src="PASTE-BEFORE-IMAGE-URL-HERE" 
      alt="Before website redesign example" 
      class="cc-before-img"
    >

    <div class="cc-after-layer">
      <img 
        src="PASTE-AFTER-IMAGE-URL-HERE" 
        alt="After website redesign example" 
        class="cc-after-img"
      >
    </div>

    <div class="cc-slider-line">
      <span class="cc-slider-handle"></span>
    </div>
  </div>

  <div class="cc-before-after-labels">
    <span>Before</span>
    <span>After</span>
  </div>
</div>

Replace the placeholder image URLs with your own WordPress Media Library URLs.

Step 3: Add the CSS

Go to:

Appearance → Customize → Additional CSS

Paste the CSS code from the earlier section.

This controls the slider layout, handle, image positioning, responsive behavior, and labels.

Step 4: Add the jQuery

For JavaScript, it is better to use a code snippets plugin or your child theme file instead of pasting scripts directly into the page editor.

Add the jQuery code from the earlier section using one of these methods:

• Code snippets plugin
• Child theme JavaScript file
• Theme custom JavaScript area
• Page builder custom code feature

Make sure the code uses this wrapper:

jQuery(document).ready(function ($) {
  // Your slider code here
});

This is important because WordPress loads jQuery in no-conflict mode. Using $ directly without wrapping it properly can cause the before after slider not working issue.

Step 5: Test the Slider

After adding the code, test the page on:

• Desktop
• Tablet
• Mobile
• Chrome
• Firefox
• Safari
• Incognito/private browser window

Also test dragging the slider with a mouse and with touch gestures.

Method 2: Add a Before After Image Slider in Gutenberg

To add a before after image slider in Gutenberg, use the Custom HTML block method.

Here is the process:

1. Open your WordPress page or post.
2. Click the plus icon to add a new block.
3. Search for Custom HTML.
4. Paste the before after slider HTML.
5. Add the CSS in Appearance → Customize → Additional CSS.
6. Add the jQuery using a code snippets plugin or theme script area.
7. Preview the page before publishing.

This method is useful when you only need one or two sliders and you are comfortable adding custom code.

However, Gutenberg does not automatically manage the CSS and JavaScript for you. That means you must make sure the required CSS and jQuery code are properly loaded on the page.

For multiple sliders, use unique wrapper classes or the reusable code above, which already supports multiple sliders on the same page.

Method 3: Add a Before After Image Slider in Elementor

Elementor users can also add a custom jQuery before after image slider using the HTML widget.

Follow these steps:

1. Open your page with Elementor.
2. Drag the HTML widget into the section where you want the slider.
3. Paste the slider HTML.
4. Add the CSS in Elementor’s custom CSS area, theme customizer, or site CSS area.
5. Add the jQuery using Elementor custom code, a snippets plugin, or your theme.
6. Update the page and test the slider.

This method works well when you want to place the slider inside an Elementor landing page, service page, portfolio page, or case study layout.

You can also style the section around the slider with Elementor controls, such as spacing, background color, heading text, and call-to-action buttons.

For non-technical Elementor users, a dedicated before after image slider plugin with Elementor support may be easier than adding custom code.

Method 4: Create a WordPress Shortcode for the Before After Slider

A shortcode is useful when you want to reuse the same slider layout in multiple places.

You can create a shortcode that outputs the slider HTML. This is a better approach than copying the same HTML again and again.

Here is a simple example:

function cc_before_after_slider_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'before' => '',
            'after'  => '',
            'before_alt' => 'Before image',
            'after_alt'  => 'After image',
        ),
        $atts,
        'before_after_slider'
    );

    ob_start();
    ?>
    <div class="cc-before-after-slider">
      <div class="cc-before-after-wrapper">
        <img 
          src="<?php echo esc_url($atts['before']); ?>" 
          alt="<?php echo esc_attr($atts['before_alt']); ?>" 
          class="cc-before-img"
        >

        <div class="cc-after-layer">
          <img 
            src="<?php echo esc_url($atts['after']); ?>" 
            alt="<?php echo esc_attr($atts['after_alt']); ?>" 
            class="cc-after-img"
          >
        </div>

        <div class="cc-slider-line">
          <span class="cc-slider-handle"></span>
        </div>
      </div>

      <div class="cc-before-after-labels">
        <span>Before</span>
        <span>After</span>
      </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('before_after_slider', 'cc_before_after_slider_shortcode');

Then you can use this shortcode inside a page or post:

[before_after_slider before="https://yourwebsite.com/before.jpg" after="https://yourwebsite.com/after.jpg" before_alt="Before renovation" after_alt="After renovation"]

This shortcode method is useful for developers or advanced WordPress users. For beginners, a plugin is usually easier and safer.

How to Move a CodePen Before After Slider into WordPress

Many users search for a before after image slider CodePen example, build the slider successfully, and then face problems when moving it to WordPress.

Here is the correct process:

1. Move the HTML

Copy the HTML from CodePen and paste it into a WordPress Custom HTML block, Elementor HTML widget, or shortcode template.

2. Move the CSS

Copy the CSS and paste it into:

• Appearance → Customize → Additional CSS
• Your child theme stylesheet
• Elementor custom CSS
• A custom CSS plugin

3. Move the jQuery

Copy the JavaScript and add it through:

• A code snippets plugin
• Theme JavaScript file
• Elementor custom code
• Child theme script file

Do not randomly paste JavaScript into the visual editor because WordPress may remove or break the script.

4. Replace Image URLs

CodePen often uses external image URLs. In WordPress, use image URLs from your Media Library for better control and performance.

5. Check jQuery Format

In CodePen, $ may work directly. In WordPress, use:

jQuery(document).ready(function ($) {
  // Code here
});

6. Clear Cache

After adding the code, clear:

• WordPress cache
• Browser cache
• CDN cache
• Minification cache

Sometimes the slider is working, but an older cached file prevents the update from showing.

How to Add Multiple Before After Sliders on One WordPress Page

The code in this guide already supports multiple sliders because it uses:

$(".cc-before-after-wrapper").each(function () {
  // Slider code
});

That means you can add more than one slider on the same page using the same HTML structure.

Example:

<div class="cc-before-after-slider">
  <!-- First slider images -->
</div>

<div class="cc-before-after-slider">
  <!-- Second slider images -->
</div>

<div class="cc-before-after-slider">
  <!-- Third slider images -->
</div>

Each slider will work independently.

This is useful for:

• Portfolio pages
• Case study pages
• Real estate pages
• Beauty clinic treatment pages
• Interior design project pages
• Product comparison sections
• Web design before-after showcases

When adding multiple sliders, avoid using very large images for every slider. Large images can slow down the page and affect user experience.

WordPress Plugin Alternative: No-Code Before After Slider

Custom jQuery code is useful, but it is not always the best option for every WordPress user.

A WordPress before after image slider plugin can save time, especially when you want:

• No-code slider creation
• Shortcode support
• Gutenberg support
• Elementor support
• Multiple slider layouts
• Mobile-friendly controls
• Labels and captions
• Image alt text support
• Lazy loading
• Horizontal and vertical comparison styles
• Easy slider management from the dashboard

For many site owners, marketers, agencies, and non-technical users, a plugin is faster than writing or managing custom code.

A plugin can also reduce the risk of breaking your layout, especially when your WordPress theme or page builder updates.

Use custom jQuery code when you want full control. Use a plugin when you want speed, flexibility, and easier management.

jQuery Code vs WordPress Plugin: Which One Should You Use?

Both methods can work well. The best choice depends on your goal.

Option	Best For	Main Benefit
jQuery CodePen code	Developers and advanced users	Full design and code control
WordPress plugin	Beginners, marketers, agencies	Faster setup without coding
Elementor widget/plugin	Elementor users	Easy page builder workflow
Gutenberg shortcode/block	Block editor users	Simple WordPress editing
Custom shortcode	Developers building reusable layouts	Cleaner repeated usage
Theme integration	Custom WordPress projects	Deep design control

Choose custom code when you only need a lightweight slider and you are comfortable editing HTML, CSS, and jQuery.

Choose a plugin when you need multiple sliders, client-friendly controls, page builder support, or a faster no-code workflow.

Best Use Cases for a Before After Image Slider

A visual comparison slider can work in many industries. Here are some practical examples.

Photography Websites

Photographers can use a before after slider to show photo retouching, color correction, lighting adjustment, or editing style.

Real Estate Websites

Real estate businesses can compare empty rooms with staged rooms, old property photos with renovated spaces, or exterior improvements.

Beauty and Skincare Clinics

Beauty clinics can show treatment results, skincare improvements, smile makeovers, hair restoration progress, or cosmetic service outcomes.

Renovation and Interior Design

Contractors, interior designers, and home renovation companies can show room transformations, kitchen upgrades, bathroom remodels, and landscape improvements.

Web Design Portfolios

Web designers can compare old website designs with new website redesigns. This is useful for case studies and service pages.

Product Showcase Pages

Brands can show product improvements, photo editing results, cleaning results, repair results, or feature comparisons.

Landing Pages

A before after image slider can make landing pages more persuasive by showing visible transformation instead of only describing it with text.

Best Practices for Before After Image Sliders

A slider is only effective when it is easy to use and visually clear. Follow these best practices for better results.

Use Same-Size Images

Always use before and after images with the same width and height. Different image sizes can cause alignment issues.

Compress Your Images

Large images can slow down your WordPress page. Compress images before uploading them to the Media Library.

Add Descriptive Alt Text

Use helpful alt text for both images. Instead of writing “before image,” describe what the image shows.

Example:

• Before kitchen renovation with old cabinets
• After kitchen renovation with modern white cabinets

Make the Slider Mobile-Friendly

Many visitors browse from mobile devices. Make sure the slider handle is easy to drag on smaller screens.

Avoid Too Many Sliders on One Page

Using too many image sliders can slow down the page. Add only the most important comparisons.

Use Clear Labels

Labels like “Before” and “After” help users understand what they are seeing.

Test Across Browsers

Test the slider in Chrome, Safari, Firefox, and mobile browsers.

Keep the Design Simple

The slider should highlight the image comparison, not distract users with too many effects.

Common Problems and Fixes

Before After Slider Not Working in WordPress

This usually happens because the jQuery code is not loaded correctly.

Common causes include:

• jQuery is not loaded
• $ is used without the WordPress jQuery wrapper
• JavaScript is pasted into the wrong area
• Theme or plugin conflict
• Cache is loading an old script
• Minification plugin is breaking the JavaScript

Use this wrapper in WordPress:

jQuery(document).ready(function ($) {
  // Slider code here
});

Also clear your cache after adding the code.

CodePen Slider Works but WordPress Does Not

This is a common issue. CodePen automatically manages JavaScript settings, but WordPress does not always behave the same way.

To fix it:

• Make sure jQuery is loaded
• Use the WordPress jQuery no-conflict wrapper
• Add JavaScript through a proper snippets plugin or theme file
• Replace external image URLs with WordPress Media Library URLs
• Check the browser console for errors
• Temporarily disable caching or minification plugins

jQuery Before After Slider Not Dragging

If the slider handle is visible but does not move, the JavaScript is probably not running.

Check these points:

• Is jQuery loaded?
• Is the JavaScript placed after jQuery?
• Is there a console error?
• Did you copy the class names correctly?
• Is another plugin blocking scripts?
• Is the slider hidden inside a tab, popup, or lazy-loaded section?

Class names must match exactly between your HTML, CSS, and JavaScript.

Before After Slider Images Not Aligned

Image alignment issues usually happen when the before and after images have different dimensions.

To fix it:

• Use two images with the same width and height
• Crop both images before uploading
• Avoid mixing portrait and landscape images
• Use the same subject position in both images
• Make sure CSS is not forcing different heights

For best results, prepare both images in the same canvas size before uploading them to WordPress.

Before After Slider Not Responsive on Mobile

If the slider looks broken on mobile, check the CSS.

Common fixes:

• Use width: 100%
• Avoid fixed pixel widths
• Use percentage-based slider positioning
• Make the handle large enough for touch
• Test on real mobile devices
• Avoid placing the slider inside a container with fixed width

The code in this guide uses percentage-based width, which is better for responsive WordPress layouts.

Before After Slider Handle Not Moving

The handle may not move if JavaScript cannot calculate the slider width correctly.

Possible causes:

• The slider is inside a hidden tab or accordion
• The image has not loaded yet
• The wrapper has zero width
• CSS display settings are incorrect
• A parent container has overflow or positioning issues

Try placing the slider in a normal visible section first. Once it works, move it into your desired layout.

Before After Slider Loading Slowly

Large images are the most common reason for slow sliders.

To improve speed:

• Compress images before upload
• Use WebP when possible
• Use lazy loading
• Avoid adding too many sliders on one page
• Use properly sized images
• Remove unused scripts
• Use a lightweight slider solution

A before after image comparison slider is visual, so image quality matters. But the images should still be optimized for the web.

Accessibility Tips for Before After Sliders

A before after slider is visual, but you can still make it more accessible.

Use these tips:

• Add descriptive alt text to both images
• Add visible labels such as Before and After
• Do not rely only on color to explain the difference
• Add a short text summary below the slider when needed
• Make the slider handle large enough for mobile users
• Keep contrast clear for labels and controls

For example, instead of only showing a slider, you can add a short caption:

“Before: old kitchen layout with dark cabinets. After: renovated kitchen with open layout and modern lighting.”

This helps users understand the transformation even if they cannot fully interact with the slider.

Performance Tips for WordPress Before After Sliders

Image sliders can affect performance if not optimized properly. Since before-after sliders use two images in the same space, you should pay extra attention to file size.

Follow these performance tips:

Use Proper Image Dimensions

Do not upload a 4000px image if your content area only displays 900px. Resize the image before uploading.

Compress Images

Use compressed JPG, PNG, or WebP images. Smaller file sizes help the page load faster.

Avoid Too Many Sliders Above the Fold

If you add several sliders at the top of the page, the page may feel slow. Place the most important slider first and move extra comparisons lower on the page.

Use Lazy Loading

Lazy loading helps delay off-screen images until users scroll near them. This is useful when you have multiple before-after sliders on one page.

Keep JavaScript Lightweight

The custom jQuery code in this tutorial is lightweight. Avoid loading multiple slider libraries when one simple solution is enough.

Where Should You Place a Before After Slider on a WordPress Website?

You can place a before-after image slider in different parts of your site depending on your goal.

Service Pages

Use sliders to show service results. For example, a renovation company can show before and after remodeling photos.

Portfolio Pages

Showcase multiple projects with image comparisons.

Case Studies

Use a slider to support a story. Explain the problem, show the before image, describe the process, and reveal the after result.

Landing Pages

Place one strong before-after comparison near the top or middle of the landing page to increase trust.

Blog Posts

Use sliders inside tutorials, reviews, transformation stories, and comparison articles.

Product Pages

Show product improvement, cleaning results, editing results, or feature differences.

A slider works best when the visual change is clear and meaningful.

Should You Use a Horizontal or Vertical Before After Slider?

Most before-after sliders use a horizontal drag handle. This means users drag the handle from left to right.

A horizontal slider is best for:

• Website redesigns
• Room renovations
• Portrait editing
• Product comparisons
• General before-after images

A vertical before-after slider lets users drag from top to bottom.

A vertical slider can be useful for:

• Landscape edits
• Long product images
• Aerial views
• Tall design layouts
• Special creative comparisons

For most WordPress websites, a horizontal before after image slider is the easiest and most familiar option.

Customization Ideas for Your Before After Slider

Once the basic slider is working, you can customize it to match your website design.

Change the Slider Handle Style

You can adjust the handle size, shape, shadow, and icon.

Example:

.cc-slider-handle {
  width: 54px;
  height: 54px;
  border: 3px solid #ffffff;
}

Change the Border Radius

For a softer card-style look:

.cc-before-after-wrapper {
  border-radius: 24px;
}

For a sharp modern look:

.cc-before-after-wrapper {
  border-radius: 0;
}

Add a Box Shadow

.cc-before-after-wrapper {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

Change Label Text

You can replace “Before” and “After” with more specific labels, such as:

• Original / Edited
• Old Design / New Design
• Before Renovation / After Renovation
• Raw Photo / Final Photo
• Previous Website / Redesigned Website

Add a Caption Below the Slider

A short caption can help explain what changed.

Example:

<p class="cc-slider-caption">
  Drag the handle to compare the original room with the completed renovation.
</p>

.cc-slider-caption {
  margin-top: 12px;
  font-size: 15px;
  color: #555555;
  text-align: center;
}

When Custom jQuery Code Is Not the Best Option

Custom code gives you control, but it also requires maintenance.

A custom jQuery before after slider may not be the best choice when:

• You are not comfortable editing code
• You need many sliders across the site
• Clients need to manage sliders themselves
• You want Elementor or Gutenberg controls
• You want built-in shortcode options
• You need lazy loading and advanced settings
• You want vertical and horizontal layouts without custom development

In those cases, a WordPress before after slider plugin is usually a better option. It gives you a faster workflow and reduces the chance of code mistakes.

Final Thoughts

A WP before after image slider jQuery CodePen example is a great starting point when you want to build a custom image comparison slider for WordPress. You can test the HTML, CSS, and jQuery in CodePen first, then move the code into WordPress using a Custom HTML block, Elementor HTML widget, shortcode, or theme file.

For developers, the custom jQuery method gives full control over the slider structure and design. For beginners, agencies, marketers, and busy website owners, a WordPress before after image slider plugin is often easier and faster.

The most important thing is to choose the method that fits your workflow. Use custom code when you want flexibility. Use a plugin when you want speed, page builder support, shortcode options, and easier management.

A well-designed before after image slider can make your WordPress page more visual, more convincing, and more useful for visitors. Whether you are showing a renovation, redesign, product change, photo edit, or service result, the right image comparison slider can help users understand the transformation instantly.

FAQs

This page was last edited on 23 June 2026, at 5:50 pm