7/6/2023 0 Comments Image carousel html![]() This bug causes styles on the input to be applied to the next element in the document, which would cause all of the carousel tables to become “display: none!important max-height: 0 visibility: hidden ” and disappear. The empty spans are used to avoid an annoying bug in and Office 365. ![]() Without this code, it’s difficult to hide inputs from Outlook and they will be rendered as (useless) radio buttons. This is Justin Khoo’s technique, from Fresh Inbox. Notice the MSO conditional code, which is used to hide these inputs from Outlook. Įach nested table will look the same, but we’ll increment the id attribute on each input. Inside of the TD of the carousel table, we’ll start to build our nested input tables. The main carousel table holds all of the nested tables with inputs and will be resized via media queries for various screen sizes. This will contain the main carousel table and float everything in the center of the email. This is done to enable the use of sibling selectors, which will create the interactive behavior.įirst, let’s build the carousel wrapper. The input tables are coded so that each one contains the table next input table. Now we’ll code the inputs and the table that will hold our carousel. This is so that the buttons will be invisible in unsupported clients.Īfter we add in the tables that contain the inputs and content, we’ll move these labels to their correct position in the document flow. Notice that these labels are hidden by default, using these styles: “display: none max-height: 0 visibility: hidden font-size:1px line-height:1px ”. The “for” attribute connects them to the correct checkbox, which is what we’ll use to build the responsive behavior. They also each have a unique “slide-x” class. You can see that each label has the button class, which will be used to style it later. Here’s an example of how the buttons should be coded: The labels allow us to connect the button to the inputs, and the spans are used to style text and hide the buttons on unsupported clients. This is the easy part! The buttons are each just a set of labels and spans. Basic Codeįirst we’ll need to build the basic frame of an email, so that we can start dropping our carousel code in. 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. 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. This carousel has a few components, and we’ll handle each of them separately. If you’re just dying to see the code we’ll be using for this tutorial, check it out on Codepen. Justin Khoo also has a carousel builder that uses a different technique. ![]() This tutorial is based on the work of Sam Johnston, you should check out his original article. 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). ![]() Using a carousel in an email can be a powerful tool, especially for mobile where vertical space is at a premium. Interactive email is becoming more popular than ever. ![]()
0 Comments
Leave a Reply. |