Image Carousel for Email

CSS

<style>
    input{
      display: none;
    }
    @media screen and (max-width:9999px){
      .cboxcheck:checked + * .thumb-carousel,
      * [summary=cboxcheck]:checked + * [summary^=thumb-carousel] {
        height: auto !important;
        max-height: none !important;
        line-height:0;
      }
      .thumb-carousel span,
      * [summary^=thumb-carousel] span {
        font-size:0;
        line-height:0;
      }
      
      .cboxcheck:checked + * .thumb-carousel .car-content, 
      * [summary=cboxcheck]:checked + * [summary^=thumb-carousel] [summary^=content]{
        display:none;
        max-height:0px;
        overflow:hidden;
      }
      .thumb-carousel .cbox1:checked + span .content-1,
      .thumb-carousel .cbox2:checked + span .content-2,
      .thumb-carousel .cbox3:checked + span .content-3,
      .thumb-carousel .cbox4:checked + span .content-4,
      .thumb-carousel .cbox5:checked + span .content-5,
      * [summary^=thumb-carousel] [summary=cbox1]:checked + span [summary=content-1], 
      * [summary^=thumb-carousel] [summary=cbox2]:checked + span [summary=content-2],
      * [summary^=thumb-carousel] [summary=cbox3]:checked + span [summary=content-3], 
      * [summary^=thumb-carousel] [summary=cbox4]:checked + span [summary=content-4], 
      * [summary^=thumb-carousel] [summary=cbox5]:checked + span [summary=content-5] 
      {
        display:block !important;
        max-height:none !important;
        overflow:visible !important;
      }
      

      .thumb-carousel .thumb,
      * [summary^=thumb-carousel] [summary=thumb]{
        cursor:pointer;
        display:inline-block !important;
        width:17.5%;
        margin:1% 0.61%;
        border:2px solid #bbbbbb;
      }
      /* hide for thunderbird as it doesn't support checkboxes */
      .moz-text-html .thumb {
        display:none !important;
      }
      .thumb-carousel .thumb:hover,
      * [summary^=thumb-carousel] [summary=thumb]:hover{
        border:2px solid #444444;
      }
      .thumb-carousel input:checked + span > span,
      * [summary^=thumb-carousel] [summary^=cbox]:checked + span > span{
        border-color: #444444;
      }  
      .thumb-carousel .thumb img,
      * [summary^=thumb-carousel] [summary=thumb] img{
        width:100%;
        height: auto;
      }
      .thumb-carousel img,
      * [summary^=thumb-carousel] img{
        max-height: none !important;
      }      
      .cboxcheck:checked + * .fallback{
        display:none !important;
        display:none;
        max-height: 0px;
        height: 0px;
        overflow: hidden;
      }
      * [summary="cboxcheck"]:checked + * [summary="fallback"]
      {
        max-height: 0px;
        height: 0px;
        overflow: hidden;
      }  
    }

    @media screen and (max-width:600px){
      .car-table.responsive,
      .car-table.responsive .thumb-carousel,
      .car-table.responsive .thumb-carousel .car-content img,
      .car-table.responsive .fallback .car-content img
       {
        width:100% !important;
        height:auto;
       }
    }    
    
</style>

HTML

    <table class="car-table  responsive" cellpadding=0 cellspacing=0 border=0 width="450"><tr><td>
    <!--[if !mso]><!-- -->
    <input type=radio class="cboxcheck" summary="cboxcheck" style="display:none !important;" checked>
    <!--<![endif]-->
    <div>
    <!--[if !mso]><!-- -->
    <div class="thumb-carousel " summary="thumb-carousel" style="width:450px;height:0px;max-height:0px;overflow:hidden;text-align:center">
        <label>
    <input type="radio" name="car-rd1" class="cbox3" summary="cbox3" style="display:none !important;"  >
    <span>
        <label>
    <input type="radio" name="car-rd1" class="cbox2" summary="cbox2" style="display:none !important;"  >
    <span>
        <label>
    <input type="radio" name="car-rd1" class="cbox1" summary="cbox1" style="display:none !important;" checked >
    <span>
        <div class="content-1 car-content" summary="content-1"><a href="http://www.freshinbox.com"><img src="http://freshinbox.com/assets/images/cities/city-nyc.jpg" width=450 height=280 alt="" style="display:block;max-height:0" border=0></a></div>
        <div class="content-2 car-content" summary="content-2"><a href="http://www.freshinbox.com"><img src="http://freshinbox.com/assets/images/cities/city-sf.jpg" width=450 height=280 alt="" style="display:block;max-height:0" border=0></a></div>
        <div class="content-3 car-content" summary="content-3"><a href="http://www.freshinbox.com"><img src="http://freshinbox.com/assets/images/cities/city-chicago.jpg" width=450 height=280 alt="" style="display:block;max-height:0" border=0></a></div>
          <span class="thumb" summary="thumb" style="display:none;"><img src="http://freshinbox.com/assets/images/cities/city-nyc.jpg" width="50" style="display:block;max-height:0" border=0></span>
    </span>
    </label>
          <span class="thumb" summary="thumb" style="display:none;"><img src="http://freshinbox.com/assets/images/cities/city-sf.jpg" width="50" style="display:block;max-height:0" border=0></span>
    </span>
    </label>
          <span class="thumb" summary="thumb" style="display:none;"><img src="http://freshinbox.com/assets/images/cities/city-chicago.jpg" width="50" style="display:block;max-height:0" border=0></span>
    </span>
    </label>
        </div>
    <!--<![endif]-->
    <div class="fallback " summary="fallback">
    <div class="car-content" summary="car-content"><a href="http://www.freshinbox.com"><img src="http://freshinbox.com/assets/images/cities/city-nyc.jpg" width=450 height=280 alt="."style="display:block;" border=0></a></div>
    </div>
    </div>
    </td></tr></table>