Webflow sync, pageviews & more.
NEW

How can I create a slider for a before/after image view in Webflow? Is there a better way to showcase comparison photos for optimal mobile view?

TL;DR
  • Use a third-party embed (e.g., JuxtaposeJS) or custom code with layered images and a range slider to create the before/after effect.
  • For mobile-friendly design, ensure images are responsive and consider using a toggle-based image comparison for better touch interaction.

To create a before/after image slider in Webflow, you’ll need to use custom code or a third-party integration, as Webflow does not offer a native before/after slider component. Here's how you can do it effectively and make it mobile-friendly.

1. Use a Third-Party Before/After Slider

  • Recommended Tool: Use the TwentyTwenty jQuery plugin or an embed from a tool like JuxtaposeJS or Compare Image Slider by Elfsight.
  • How to Add:
  • Add an Embed Element from the Add panel.
  • Paste the third-party embed code (you'll need to include CSS and JavaScript manually).
  • Inside the embed, place two images: the before and after versions, following the plugin syntax.
  • Mobile Optimization:
  • Ensure both images are the same size and are set to 100% width with auto height.
  • Add loading="lazy" to images to improve performance on mobile.

2. Use Webflow with Custom Code (Advanced)

  • Create a Div Block with relative position.
  • Place two Image Blocks inside it: set one as absolute and layered over the other.
  • Add an Input Range Slider below or on top (via absolute positioning).
  • Use custom JavaScript to link the slider to the width of the top image, dynamically revealing more or less of the top (after) image.
  • Ensure the script responds to window resizing for responsive behavior.

3. Alternative: Stacked Comparison with Toggle

For simpler setups or better mobile performance:

  • Use two image elements, one above the other.
  • Add a toggle button (e.g., “See Before / See After”) using Webflow Interactions.
  • When toggled, use opacity or display changes to show/hide the respective image.
  • This ensures better responsivity on mobile without requiring dragging/slider gestures.

4. Tips for Mobile Optimization

  • Keep image file sizes small but high-quality using compression tools (e.g., TinyPNG).
  • Ensure the slider or image container is responsive with 100% width and maximum width constraints.
  • Test gestures on mobile—many users have trouble with small draggable sliders.

Summary

To create a before/after image slider in Webflow, use a third-party embed like JuxtaposeJS or custom code involving layered images and a JavaScript-powered range slider. For optimal mobile experience, consider a toggle-based comparison that’s simpler to use and more touch-friendly.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can the aria-haspopup attribute be removed in the responsive menu component in Webflow? My client's hired Accessibility Audit company is requesting its removal, but it seems hardcoded. Is there a way to remove these attributes?
How can I preserve the forward slash in the custom URL slug for my Category Collection in Webflow? I want to format my blog categories like this: "site.com/blog/category/category-name". The current format is "site.com/blog-category/category-name" and I want to mirror the SEO authority's blog URL structure.
How can I optimize my blog in Webflow for SEO by adding meta descriptions, tags, snippets, and alt text to improve search engine visibility?
What could be causing my CMS collections to disappear in Webflow and how can I resolve it?
How can I make hyperlinks appear in blue when the text is bold or part of a heading in Webflow?
Is it still a good idea to fully commit to Webflow even though there haven't been many updates this year and there is a lack of communication from developers?
What is the difference between the account plan and the site plan in Webflow? Which plan would you recommend for creating a simple website with multiple sections, like a portfolio site, that is not business-oriented? Please help!
Why are changes on the Webflow domain updating correctly, but not on the linked domain? I've tried unpublishing and publishing again on the linked domain, but it didn't work.
Can I make at least one checkbox in a group required in Webflow? If users don't select at least one checkbox, can I show an error message?
How can I sort a CMS collection with multi-reference fields in Webflow? The option to sort seems to be missing.
How can I fix the issue of a trailing slash causing a redirect to the Webflow subdomain instead of my domain?
What are the best practices for building an entry list in Webflow and integrating third-party tools or plugins?
Will multiple clients hosted on Webflow be seen on the same shared IP address and mixed in with other clients using the same DNS settings, if we offer client billing and host them in our account?
Can Webflow provide a solution for calculating shipping costs based on different cities in Brazil, considering the variations in shipping rates?
How can I delete a hover state's styles in Webflow that I added by mistake?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?