Want to add your Free Listing?
Click here to register

Email On Acid – Tutorial: Build an Interactive Carousel for Email

Email On Acid – Tutorial: Build an Interactive Carousel for Email

By: Email On Acid

Interactive email is becoming more popular than ever. Carousels can be a powerful tool for email, especially for mobile where vertical space is at a premium. The carousel we’ll be creating below isn’t just for images though, you can add any content you want to each section (including buttons and text). This tutorial is based on the work of Sam Johnston, you should check out his original article. Justin Khoo also has a carousel builder that uses a different technique.

If you’re just dying to see the code we’ll be using for this tutorial, check it out on Codepen. This carousel has a few components, and we’ll handle each of them separately.


One big advantage of Sam’s technique is that in email clients that don’t support this kind of interactivity, the email client will instead render the content blocks as a stack. I’ll also note that for this carousel, the content blocks have a fixed height, and each block must have content of the same height to make it fit in the space provided.

Basic Code

First we’ll need to build the basic frame of an email, so that we can start dropping our carousel code in.

We saw this post and thought we would share it with you.
Want to check out the who’s who and what’s what of email marketing?
Read The Buzz.


Have an article you think we should add to The Buzz? Click Here.
  • Profile:  Jeff Ginsberg has 17+ years’ experience and is an industry known authority on email marketing who gets in the trenches with clients and helps them fulfill their marketing objectives, increase revenue and brand engagement. Clients rely on him and his team at The eMail Company to provide them with expertise from strategy to technology and from campaign management to channel integration. Jeff has worked with clients across all spectrums in the financial, automotive, retail and consumer packaged goods space. His experience covers both B2B and B2C markets. He has a strong background in educating and training agencies and clients about email best practices and is a wealth of knowledge when it comes to marketing tools and vendor selection. While Jeff’s team may be small, they know how to solve BIG email marketing problems. Looking for help with your next campaign? Don’t be afraid to give him a call – Jeff and his team ready to help you today. Give me a call: Toll Free: 877-We-eMail (877-933-6245) Local: 416-225-7711 eMail: jeff@theemailcompany.com
  • Website:  http://www.theemailguide.com
  • Twitter:   http://www.twitter.com/theemailguide
  • LinkedIn:   http://ca.linkedin.com/in/chiefemailofficer
Other post by this Author
Leave a Reply