[ Posted by A Zone Dev ] Email Carousel Generator Based on Fresh Inbox Carousel http://freshinbox.com/resources/tools/carousel/

fiddle_060872.php

<?php

/*
 
  For demo, click "Run" now!
 
 Instructions
 * - Scroll to settings object in Line 23
 * - Add as many 'items' as you wish
 * - Experiment with thumnbail margins, borders (no border-box box sizing)
 * - The markup can be copied directly into your template
 * - Click Run

 Client Support
 * - Most web browsers, including IE8+
 * - iOS 7+
 * - A lot of Android devices
 * - Some versions of Mobile Gmail

 Fallback
 * - Displays first image without thumbnails by default

*/

// Edit your settings here
$settings = [
    'items' => [
		1 => [
			'title' => 'Name',
	        'link' => 'http://google.com',
			'url' => 'http://placehold.it/560x315/EEE8E2/4A2F3C'
		],
		2 => [
			'title' => 'Name',
	        'link' => 'http://google.com',
			'url' => 'http://placehold.it/560x315/4A2F3C/EEE8E2'
		],
		3 => [
			'title' => 'Name',
	        'link' => 'http://google.com',
			'url' => 'http://placehold.it/560x315/EEE8E2/4A2F3C'
		],
		4 => [
			'title' => 'Name',
	        'link' => 'http://google.com',
			'url' => 'http://placehold.it/560x315/4A2F3C/EEE8E2'
		]
	],
	'size' => [
		'width' => 560,
		'height' => 348
	],
	'thumbnails' => [
		'width' => '25%', // Example: 17.5%;
        'margin' => '0', // Example: 10px 0.61%
        'border' => '0px solid #bbbbbb', // Example: 2px solid #bbbbbb
        'hover_border' => '0px solid #444444' // Example: 2px solid #444444
    ]
];

class EmailCarousel {

	public $Items;
	public $Size;
	public $Thumbnails;

    public $output = [];

	function __construct($settings) {
		$this->Items = $settings['items'];
		$this->Size = $settings['size'];
		$this->Thumbnails = $settings['thumbnails'];
		$this->render();
		$this->renderStyles();
        $this->outputEverything();
	}

	private function render() {
    ob_start();
?><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
	<tr>
		<td height="40" style="font-size: 0; line-height: 0;">
			<table class="car-table responsive" cellpadding=0 cellspacing=0 border=0 width="<?php echo $this->Size['width']; ?>">
				<tr>
					<td bgcolor="#EEE8E2">
						<!--[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:<?php echo $this->Size['width']; ?>;height:0px;max-height:0px;overflow:hidden;text-align:left">

							<!-- Repeater 1 - REVERSE -->
							<?php foreach(array_reverse($this->Items, true) as $item => $meta) : $isFirst = $item == 1 ? ' checked' : ''; ?>
								<label>
									<input type="radio" name="car-rd1" class="cbox<?php echo $item; ?>" summary="cbox<?php echo $item; ?>" style="display:none !important;"<?php echo $isFirst; ?>>
									<span>
							<?php endforeach; ?>

							<!-- Repeater 2 - NON REVERSE -->
							<?php foreach($this->Items as $item => $meta) : ?>
								<div class="content-<?php echo $item; ?> car-content" summary="content-<?php echo $item; ?>">
									<a href="<?php echo isset($meta['link']) ? $meta['link'] : ''; ?>" target="_blank">
										<img src="<?php echo $meta['url']; ?>" width="<?php echo $this->Size['width']; ?>" height="<?php echo $this->Size['height']; ?>" alt="" style="display:block;max-height:0" border=0>
									</a>
								</div>
							<?php endforeach; ?>

							<!-- Repeater 3 - NON REVERSE -->
							<?php foreach($this->Items as $item => $meta) : ?>
										<span class="thumb" summary="thumb" style="display:none;">
											<img title="<?php echo $meta['title']; ?>" src="<?php echo $meta['url']; ?>" style="display:block;max-height:0" border="0">
										</span>
									</span>
								</label>
							<?php endforeach; ?>

						</div>

						<!--<![endif]-->
						<div class="fallback" summary="fallback">
							<div class="car-content" summary="car-content">
								<a href="<?php echo $this->Items[1]['link']; ?>">
									<img src="<?php echo $this->Items[1]['url']; ?>" width="<?php echo $this->Size['width']; ?>" height="<?php echo $this->Size['height']; ?>" alt="."style="display:block;" border=0>
								</a>
							</div>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</td>
	</tr>
</table>
	<?php
        $this->output['html'] = ob_get_clean();
    }

	private function renderStyles() {
        ob_start();
?><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;
      }
	  <?php foreach($this->Items as $item => $meta) {
		  echo '.thumb-carousel .cbox' . $item . ':checked + span .content-' . $item . ',';
	  } ?>
	  <?php foreach($this->Items as $item => $meta) {
		  echo '* [summary^=thumb-carousel] [summary=cbox' . $item . ']:checked + span [summary=content-' . $item . ']';
		  if($item !== count($this->Items)) { echo ','; }
	  } ?> {
        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: <?php echo $this->Thumbnails['width']; ?>;
        margin: <?php echo $this->Thumbnails['margin']; ?>;
        border: <?php echo $this->Thumbnails['border']; ?>;
      }
      /* 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:<?php echo $this->Thumbnails['hover_border']; ?>;
      }
      .thumb-carousel input:checked + span > span,
      * [summary^=thumb-carousel] [summary^=cbox]:checked + span > span{
        border-color: <?php echo $this->Thumbnails['hover_border']; ?>;
      }
      .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:580px){
      .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>

	<?php
       $this->output['css'] = ob_get_clean();
    }

    public function outputEverything() { ?>
        <?php echo $this->output['html']; ?>
        <?php echo $this->output['css']; ?>
        <hr>
        <h4>Step 1: Add this HTML into your parent carousel container</h4>
        <textarea style="width: 60%;height: 100px;"><?php echo $this->output['html']; ?></textarea>
        <h4>Step 2: Add this CSS into your HEAD section</h4>
        <textarea style="width: 60%;height: 100px;"><?php echo $this->output['css']; ?></textarea>
        <style>body {font-family: Arial;text-align: center; }</style>
    <?php }
}

new EmailCarousel($settings);

?>