Skip to content

Instantly share code, notes, and snippets.

@stefany-newman

stefany-newman/amp_email.html

Created July 4, 2019 22:19
Show Gist options
  • Save stefany-newman/bd7e7d4e33bfd4ccbdf7a90724206a48 to your computer and use it in GitHub Desktop.
Save stefany-newman/bd7e7d4e33bfd4ccbdf7a90724206a48 to your computer and use it in GitHub Desktop.
Download ZIP
AMP Email with a slider
Raw
amp_email.html
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
margin: 10px;
}
</style>
</head>
<body>
<h1>
Our latest trucks for sale!
</h1>
<amp-carousel
type="slides"
layout="responsive"
width="800"
height="800"
controls
>
<amp-img
src="https://fabulousnewwebsite.com/trucks/truck1.jpg"
width="800"
height="800"
layout="responsive"
alt="Truck"
>
</amp-img>
<amp-img
src="https://fabulousnewwebsite.com/trucks/truck2.jpg"
width="800"
height="800"
alt="Truck"
>
</amp-img>
<amp-img
src="https://fabulousnewwebsite.com/trucks/truck3.jpg"
width="800"
height="800"
alt="Truck"
>
</amp-img>
<amp-img
src="https://fabulousnewwebsite.com/trucks/truck4.jpg"
width="800"
height="800"
alt="Truck"
>
</amp-img>
</amp-carousel>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment