---

This is a follow up to the Animated Image Carousel for Email tutorial. In this article, we will go over how to make the images slide instead of fade when transitioning from one image to another. See the completed example here. Like the original animated carousel, this example only works with email clients that support CSS animations as well as absolute positioning such as iOS Mail (iPhone, iPad) and Apple Mail. Other clients will see the fallback content. Here's a chart of CSS support among email clients.

Sliding Transitions

We will be using three images although you should be able to modify them to accommodate as many images as you like.

Continuous Loop

You might have seen two types of sliding carousels. Those that loop continuously in one direction, and those that slide to the end and then "scroll backwards" to the beginning to start again. In this example, we're going to make our carousel loop continuously.

Left Margins

The key to our slides is that we hide the images not currently visible by sticking them to the left of the carousel by using margin-left:-100%. Technically a better mechanism is to use the translate transform (ie. transform: translateX(-100%) ) since it produces a smoother effect but as will be discussed later, iOS10 has issues with mixing translates and negative delays. We stagger the animations and start them off sliding in from the right by setting margin-left from 100% to 0%, and then when their turn is up, sliding them towards the left from 0% to -100%.

 .carousel.slide a{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:1;   
    width:100%;
    -webkit-animation: slide-anim 9s linear infinite;    
  }

 @-webkit-keyframes slide-anim
  {
      /* start slide in from right */
      0% {
        margin-left:100%;
      }
      /* end slide in */
      5%{
        margin-left:0%;
      }
      /* start slide out to left */
      33.3333%{
        margin-left:0%;
      }
      /* end slide out */
      38.3333%{
        margin-left:-100%;
      }
      100%{
        margin-left:-100%;
      }
  }

The animation keyframes are broken up into thirds (33.3333%) since we have three images. You'd use a different ratio if you have a different number of images.

Negative Animation Delays

If we used positive animation delays to stagger the timing of the slides, what would happen is that the later slides would be visible while the initial slides are being transitioned. We need to get them out of the way right at the start. By using negative animation delays, we can simulate as if the animation has had a chance to complete a full cycle and hence having the later images already safely hidden to the left of the carousel.

 .carousel.slide a:nth-child(1){
    position:relative;
    -webkit-animation-delay: -10s;    
  }
  .carousel.slide a:nth-child(2){
    -webkit-animation-delay: -7s;    
  }
  .carousel.slide a:nth-child(3){
    -webkit-animation-delay: -4s;    
  }

Notice that instead of having delays that are a multiple of of 3 (-9, -6, -3) an extra second has been deducted from each. This is to skip the initial sliding in of the first image so the animation starts with the first image already fully visible. As mentioned in the previous section, there is a bug with iOS10 that translates don't work when paired with negative animation delays, so we're forced to other mechanisms such as margins.

Carousel Code

We reuse the same HTML code for our carousel from the original article. This time, instead of using the class "fade" we use the class "slide".

<!--[if !mso]><!-- -->
<div class="carousel slide responsive" style="overflow:hidden;display:none;max-height:0px;">
<div class="car-cont" style="position:relative;width:500px;height:320px;">
<a href="https://www.google.com/search?q=castles"><img src="https://freshinbox.com/examples/animated-carousel/images/car-castle.jpg" border="0"></a>
<a href="https://www.google.com/search?q=meadows"><img src="https://freshinbox.com/examples/animated-carousel/images/car-meadow.jpg" border="0"></a>
<a href="https://www.google.com/search?q=coast"><img src="https://freshinbox.com/examples/animated-carousel/images/car-coast.jpg" border="0"></a>
</div>
</div>
<!--<![endif]-->

Here's the final code (Click on the View Code link).

Fallbacks

Since non iOS clients will not be able to view the carousel, make sure you also have solid fallbacks as covered in the original article.

All tutorials in this series

Animated Image Carousel for Email Animated Image Carousel for Email with Ken Burns Effects Animated Image Carousel for Email with Sliding Transitions Implementing Navigation Controls in Image Carousels for Email

Don't Guess, Test!

What other way to test how your carousel and fallback looks across dozens of email clients out there than with Email on Acid. Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!