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?
10 Responses to “How Can I Implement a before and after Slider on My Website?”
Bill Jones February 9th, 2017 at 8:17 pm #
I use WOW slider.
http://pdxrealestatephotography.com/before-and-after/
larry February 9th, 2017 at 8:36 pm #
@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.
Matt Rosendahl February 9th, 2017 at 9:17 pm #
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/
Kalle Punsvik February 10th, 2017 at 5:58 am #
Does anybody know how you make before/after slidees or mouseover pictures in the Squarespace cms?
Francesca Tosolini February 10th, 2017 at 6:08 am #
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.
Dan February 10th, 2017 at 7:42 am #
@ 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
Ken Brown February 10th, 2017 at 12:53 pm #
@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?
Ken Brown February 10th, 2017 at 12:59 pm #
@Matt, I don’t see on your site where you are located!
Matt Rosendahl February 10th, 2017 at 3:33 pm #
@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.
Diana February 4th, 2019 at 3:53 pm #
Is there a before and after slider that can be implemented on Instagram or Facebook??