AMP Carousel i Codepen

amp-carousel-i-codepen.markdown

AMP Carousel i Codepen

A Pen by Per Lindsø Larsen on CodePen.

License.

index.html

<amp-list 
  height="300" items="." single-item="."
  src= "https://gist.githubusercontent.com/lindsoe/5d01ef9ff5a50a20c4c25101765afc8b/raw/script.js">
 <template type="amp-mustache">
  <amp-carousel width="400"
  height="300" class="carousel"
  type="slides" autoplay
  lightbox delay="3000">
    {{#items}}
    <div class="slide">           
     <amp-img src="{{url}}"
      width="400" height="300"
    layout="responsive"></amp-img>
    <div class="caption">{{alt}}</div>     </div>
  {{/items}}
  </amp-carousel>
 </template>
</amp-list>
<h4>Klik på billede for lightbox</h4>

script.js

{
	"items": [
		{
					"url": "https://loremflickr.com/400/300/cat?1",
					"alt": "Her er en kat!"
		},
		{
					"url": "https://loremflickr.com/400/300/cat?2",
					"alt": "Her er gudhjælpemig en anden kat!"
        },
		{
					"url": "https://loremflickr.com/400/300/cat?3",
					"alt": "WTF! En tredje kat!"
        },
		{
					"url": "https://loremflickr.com/400/300/cat?4",
					"alt": "Shit happens: en fjerde kat!"
		}
	]
}

scripts

<script src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

style.scss

.carousel {
  .slide > amp-img > img {
    object-fit: contain;
  }
  .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .5rem;
    background: rgba(0, 0, 0, 0.6);
    font-family:Arial;
    color: white;
    max-height: 30%;
  }
}

h4 { 
color:grey;
font-family:Arial;
font-weight:100;
margin-left:10px;
}