Using AMP-CAROUSEL inside of AMP-LIST

AMP By Example uses relatively simple examples to demonstrate each component. It takes a lot of trial and error to find what works best out in the wild. I would like to provide / see more examples of advanced concepts.

Here is an example we have found working with AMP that better resembles the type of examples we would hope to find in the documentation. In our opinion, dynamic content is where a lot of complexity is introduced to AMP. Especially with pre-defined heights in certain cases. (We have simplified some of the code below to exclude the C# that laods the Model.HeroImage instead of {{primaryHeroImage}}. As well as carousel-dots and navigating the carousel from there)

For us, we used the below example to have a dynamic carousel load any product sku

CSS

#alternate-images-carousel {
    max-width:300px;
    height:250px;
    margin:0 auto;
}
.carousel-wrapper {
    height:260px;position:relative;
}
.hero-carousel-image {
    max-width:225px;
    height:auto;
    width:100%;
}

AMP STATE

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0
    }
  </script>
</amp-state>

AMP HTML

<div class="carousel-wrapper visible-mobile" >
    <amp-list 
        width="325" height="325" 
        layout="fill" 
        src="/alt-images?productId=1" >
        <template type="amp-mustache">
            <amp-carousel id="alternate-images-carousel" width="325" height="325" 
                type="slides" 
                layout="responsive" 
                controls
                on="slideChange:AMP.setState({selected: { slide: event.index }})">
                <amp-img 
                    on="tap:hero-zoom-lightbox"
                    src="{{primaryHeroImage}}"
                    width="325"
                    height="325"
                    layout="responsive"
                    alt="product image"
                    class="hero-carousel-image">
                </amp-img>
                {{#altImages}}
                    <amp-img 
                        on="tap:hero-zoom-lightbox"
                        src="{{altHeroImg}}" 
                        class="hero-carousel-image" 
                        layout="responsive" 
                        width="325" height="325" alt="product image -">
                    </amp-img>
                {{/altImages}}
            </amp-carousel>
        </template>
    </amp-list>
</div>

This is just one example of more advanced examples that we would like to see. Because most quality, advanced examples exists in one-off code pens or people's personal githubs/gists.

ampproject / amp-by-example

Using AMP-CAROUSEL inside of AMP-LIST #1440