---

This is the final follow up to the Animated Image Carousel for Email tutorial series. In this article, we will go over how to add navigation arrows as and thumbnails to manually transition from one image to another. See the completed example here.

The Checkbox Method

As can be seen in this tutorial, the checkbox is the workhorse of interactivity in email. Using labels that target checkboxes and radio buttons we can control which image is displayed will depend on which checkbox or radio element is in the ":checked" state.

.radio1:checked ~ .container .img1{ display: block }
.radio2:checked ~ .container .img2{ display: block }

Stopping the Animation

Since the carousel will animate by default, we'd want the carousel to stop animating when any radio element is checked. This can be achieved by setting the animation of animating elements to "none".

.radio:checked ~ .container * {
  -webkit-animation: none;
}

Left and right navigation controls

As mentioned earlier, we can control the display of images by having labels that target radio elements that hide or display certain images. We implement left and right navigation controls by absolute positioning a set of left and right navigation on each image consisting of labels that target the radio elements keyed to the next or previous image. This would mean if we had 3 images, we'd need 6 labels, 3 sets of left and right labels.

<input name="car-radio" type=radio id="car1-radio-1" class="car-radio car-radio1" style="display:none!important">
<input name="car-radio" type=radio id="car1-radio-2" class="car-radio car-radio2" style="display:none!important">
<input name="car-radio" type=radio id="car1-radio-3" class="car-radio car-radio3" style="display:none!important">


[ Carousel code ]

<div class="car-controls">
  <label for="car1-radio-3" class="car-ltn car-nav-1"></label>
  <label for="car1-radio-2" class="car-rtn car-nav-1"></label>
  <label for="car1-radio-1" class="car-ltn car-nav-2"></label>
  <label for="car1-radio-3" class="car-rtn car-nav-2"></label>
  <label for="car1-radio-2" class="car-ltn car-nav-3"></label>
  <label for="car1-radio-1" class="car-rtn car-nav-3"></label>
</div>

We can display arrows in the labels by using images or CSS techniques like this. Here's another example of how to use CSS to create arrows.

  .carousel .car-ltn,
    .carousel .car-rtn {
      z-index:100;
      width: 10%;
      height: 100%;
      position: absolute;
      background-color:transparent;
      top:0px;
      cursor:pointer;
    }
    .car-ltn {
      left:0px;
    }
    .car-rtn {
      right:0px;
    }

    .carousel .car-ltn::after,
    .carousel .car-rtn::after {
      content: '';
      width: 0; 
      height: 0; 
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      position: absolute;
      top:50%;
      margin-top:-8px;
      -webkit-filter: drop-shadow(1px 1.5px 1px rgba(0,0,0,.4));

    }
    .car-ltn::after {
      border-right: 8px solid #ffffff; 
      left: 30%;
    }
    .car-rtn::after {
      border-left: 8px solid #ffffff;
      right: 30%;
    }

In order to only display a set of left and right labels, we absolutely position them over each other and keyed to be displayed using the radio :checked technique as well.

  .carousel .car-ltn,
    .carousel .car-rtn {
      display: none;
  }

     .carousel .car-cont .car-nav-1 {
      display:block;
    }
   /* they will overlap when displayed */
    .car-radio2:checked ~ .car-cont .car-controls .car-nav-2,
    .car-radio3:checked ~ .car-cont .car-controls .car-nav-3 {
      display:block;
    }

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

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!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices. 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!