Custom Carousel Ad - AMP-HTML

Custom Carousel Ad that uses AMP-HTML

by mlealrinaldi

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Courosel_v1_201810</title>
	
	<script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- ## Setup -->
  <!-- Import the carousel component in the header. -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <link rel="canonical" href="https://ampbyexample.com/components/amp-carousel/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
	  <style amp-custom>
	  	.slide {
      		width: 200px;
      		height: 170px;
			position: absolute!important;
			overflow: hidden;
			margin-left: 20px;
    	}
	  	.cta {
			font-family: "calibri";
			font-size: 14px;
			line-height: 1.3em;
			white-space: pre-wrap!important;
			width: 120px;
			height: 36px;
			margin-right: 10px;
			font-weight: 700;
		}
		#custom-button .amp-carousel-button-prev {
      		left: 0%;
    	}
    		#custom-button .amp-carousel-button-next {
      		right: 0%;
    	}
	  	
  </style>
</head>
	<body>

			<div class="layer1">
				
				
				<div class="layer3">
					<div style="margin-bottom: 15px"></div>
					<div style="margin-left: 10px">
						<div...

CSS

.amp-carousel-button-next{
			right: 0%;
			background-image:           url('https://www.terra.com.br/ads2/adops/carrossel/seta.png');
			background-color:transparent!important;
			width: 24px;
			height: 28px;
			background-size: cover;
			border-radius: 4px;
			top: 37.5%;
		}
		.amp-carousel-button-prev{
			left: 0%;
			background-image: url('https://www.terra.com.br/ads2/adops/carrossel/seta.png');
			background-color:transparent!important;
			width: 24px;
			height: 28px;
			background-size: cover;
			border-radius: 4px;
			-webkit-transform: scaleX(-1);
    		transform: scaleX(-1);
			top: 32%;
		}
		.amp-scrollable-carousel-slide {
			margin-left: 20px;
		}
		/*.amp-carousel-button {top: 37%;}*/
		/*A opção abaixo oculta o scroll bar, mas perde-se a habilidade de arrastar com touch no mobile
		.i-amphtml-scrollable-carousel-container {overflow-x:hidden!important;}*/
		::-webkit-scrollbar {
    		width: 1px;
		}
		.layer0 {
      		width: 324px;
	  		height: 352px;
    	}
		.publicidade {
			width: 88px;
			height: 24px;
			font-family: "open-sans";
		}
		.layer1 {
			width: 300px;
			height: 300px;
			border-radius: 10px;
			background-color: #ffffff;
			box-shadow: 0px 2px 12.74px 0.26px rgba(0, 0, 0, 0.39);
		}
		.layer3	{
			margin-left: 10px;
			margin-bottom: 15px;
			width: 100%;
			display: table;
		}
		.titulo {
			float: left;
			width: 200px;
			height: 45px;
			font-family: "Calibri";
			color: #000000;
			font-size: 18px;
			font-weight: 400;
			margin-left: 15px;
		}
		.logo {
			width: 45px;
			height: 45px;
			float:left;
		}
		p {
    		display: block;
    		margin-top: 0;
    		margin-bottom: 0;
    		margin-left: 0;
    		margin-right: 0;
		}
		a:link, a:visited {
			color: #5F5F5F;
			font-size: 14px;
			font-family: "calibri";
			text-align: center;
			text-decoration: none;
			border: 1px solid #CACACA;
			border-radius: 5px;
			padding: 3px 7px;
			display: inline-block;
			font-weight: 700;
		}


a:hover, a:active {
   ...