Image Carousel: One Card 

<div class="image-carousel">
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell medium-10 medium-offset-1">
                <div class="carousel carousel--image" data-module="imagecarousel">
                    <h2 class="carousel__title cell">Title</h2>
                    <div class="carousel__track">
                        <div class="carousel__bounds"></div>
                        <div class="carousel__draggable"></div>
                    </div>
                    <div class="carousel__slider grid-x grid-margin-x">
                        <div class="carousel__slider">
                            <div class="carousel__slide js-carousel-slide cell medium-6" data-dominant-colour="#c9c9c9">
                                <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                    <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                        <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                                        <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                    </picture>
                                    <figcaption class="image__caption">
                                        <span class="image__location-icon"></span>
                                        <p class="image__location">Cork</p>
                                        <p class="image__description">Gardens in Ireland have a magic edge</p>
                                    </figcaption>
                                </figure>
                                <div class="image-carousel__caption">
                                    <div class="image-carousel__location-container">
                                        <span class="image-carousel__location-icon"></span>
                                        <p class="image-carousel__location">Cork</p>
                                    </div>
                                    <p class="image-carousel__description">Gardens in Ireland have a magic edge</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="image-carousel">
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell medium-10 medium-offset-1">
                <div class="carousel carousel--image" data-module="imagecarousel">
                    {{#if title}}<h2 class="carousel__title cell">{{{title}}}</h2>{{/if}}
                    <div class="carousel__track">
                        <div class="carousel__bounds"></div>
                        <div class="carousel__draggable"></div>
                    </div>
                    <div class="carousel__slider grid-x grid-margin-x">
                        <div class="carousel__slider">
                            {{#each responsiveImages}}
                            <div class="carousel__slide js-carousel-slide cell medium-6" data-dominant-colour="{{this.dominantColour}}">
                                {{> @cp-medium-image}}
                                {{#if caption}}
                                <div class="image-carousel__caption">
                                    {{#if caption.location}}
                                        <div class="image-carousel__location-container">
                                            <span class="image-carousel__location-icon"></span>
                                            <p class="image-carousel__location">{{caption.location}}</p>
                                        </div>
                                    {{/if}}
                                    {{#if caption.description}}<p class="image-carousel__description">{{caption.description}}</p>{{/if}}
                                </div>
                                {{/if}}
                            </div>
                            {{/each}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "title": "Title",
  "responsiveImages": [
    {
      "altText": "Alt Text",
      "dominantColour": "#c9c9c9",
      "lowResolutionUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
      "sources": [
        {
          "type": "image/jpeg",
          "largeUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
          "smallUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        }
      ],
      "caption": {
        "location": "Cork",
        "description": "Gardens in Ireland have a magic edge"
      }
    }
  ]
}

There are no notes for this item.