How Can I Implement a before and after Slider on My Website?

February 9th, 2017

Peter in Calgary asked:

I use Smugmug for my website and I’d like to have some before and after sliders on my site. Can that be done on Smugmug? Has anyone done it? How does it work?

Yes, before and after sliders are a great way to compare images, but I don’t believe that feature is built into any web hosting service. The way to put this feature in a website is that you have to be up to inserting some HTML.

One popular way of doing this is to use TwentyTwenty which is a free bunch of HTML code that you can put into your web page to create a before and after slider.

I see many before and after sliders on real estate photographers websites. Does anyone else have an easier way to implement these sliders?

Share this

9 Responses to “How Can I Implement a before and after Slider on My Website?”

  • @Bill – Your example is not what Peter is talking about. A Before/After slider is a slider across a single photo that shows a different image as the slider moves across the image. See the example at the top of this page:

    http://zurb.com/playground/twentytwenty

    Your example is one slideshow before and a second slideshow after.

  • Not sure how to do this on smugmug. But for those using wordpress, I’ve had great success with a plugin I bought off themeforest… works really well!

    Plugin: https://codecanyon.net/item/multipurpose-before-after-slider/5159016

    Example on my site: http://premiervisuals.com/before-and-after-comparisons/

  • Does anybody know how you make before/after slidees or mouseover pictures in the Squarespace cms?

  • I’m a home stager and an interior photographer, and I use Twenty Twenty on my WordPress website. It works great. Hopefully, it can be implemented on Smugmug as well.

  • @ Kalle: To do this in Squarespace, you use the same TwentyTwenty plugin Larry mentions. You need to do a simple bit of code injection in any text field on your site, but it’s a really easy process. I followed Instructions from this blog.

    http://www.massexod.us/blog/how-to-create-before-and-after-images-for-squarespace

  • @Matt, very nice site. Thank you for the link to the plugin. I’ve been planning on adding that to my site but sometimes finding plugins is a chore. Are you using the “Outdoor” theme?

  • @Matt, I don’t see on your site where you are located!

  • @Ken, thank you, I just finished the remake a few days ago. I am using the outdoor theme, although after all the custom css I had to do and stripping of features I didn’t like, it wasn’t a really good theme to work with. The back end is pretty limited.

    I have my location(s) on my services page, but should probably add it elsewhere. I’ve never really gotten any business through my site as I don’t do any advertising, strictly referral based at this point.

Comments RSS

Leave a Reply