Image Carousel

HTML
View
Context
Info
Notes


        <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 class="carousel__slide js-carousel-slide cell medium-6" data-dominant-colour="#777658">
                                <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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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">Tales from Irelands&#x27;s crypts</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">Tales from Irelands&#x27;s crypts</p>
                                </div>
                            </div>
                            <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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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">Clonmacnoise – The Monastic Marvel</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">Clonmacnoise – The Monastic Marvel</p>
                                </div>
                            </div>
                            <div class="carousel__slide js-carousel-slide cell medium-6" data-dominant-colour="#777658">
                                <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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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 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 class="carousel__slide js-carousel-slide cell medium-6" data-dominant-colour="#777658">
                                <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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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">Tales from Irelands&#x27;s crypts</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">Tales from Irelands&#x27;s crypts</p>
                                </div>
                            </div>
                            <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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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">Clonmacnoise – The Monastic Marvel</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">Clonmacnoise – The Monastic Marvel</p>
                                </div>
                            </div>
                            <div class="carousel__slide js-carousel-slide cell medium-6" data-dominant-colour="#777658">
                                <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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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"
      }
    },
    {
      "altText": "Alt Text",
      "dominantColour": "#777658",
      "lowResolutionUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
          "smallUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        }
      ],
      "caption": {
        "location": "Cork",
        "description": "Tales from Irelands's crypts"
      }
    },
    {
      "altText": "Alt Text",
      "dominantColour": "#c9c9c9",
      "lowResolutionUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
          "smallUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        }
      ],
      "caption": {
        "location": "Cork",
        "description": "Clonmacnoise – The Monastic Marvel"
      }
    },
    {
      "altText": "Alt Text",
      "dominantColour": "#777658",
      "lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
          "smallUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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"
      }
    },
    {
      "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"
      }
    },
    {
      "altText": "Alt Text",
      "dominantColour": "#777658",
      "lowResolutionUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
          "smallUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        }
      ],
      "caption": {
        "location": "Cork",
        "description": "Tales from Irelands's crypts"
      }
    },
    {
      "altText": "Alt Text",
      "dominantColour": "#c9c9c9",
      "lowResolutionUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
          "smallUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        }
      ],
      "caption": {
        "location": "Cork",
        "description": "Clonmacnoise – The Monastic Marvel"
      }
    },
    {
      "altText": "Alt Text",
      "dominantColour": "#777658",
      "lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
          "smallUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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"
      }
    }
  ]
}

Handle: @cp-carousel-image
Variants (2): Default , One Card
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/03-components/collections/cp-carousel-image.hbs
References (1): @cp-medium-image
Referenced by (3): @campaign-toolkit-page, @long-form-two, @practical-information

There are no notes for this item.

Image Carousel

Hero

Media

Site Furniture

Text

Quote

Brand Cards Carousel

Card Collection

Card Collection with Quote

Card Carousel

Featured Carousel

Image Carousel

Editorial Map & Card Grid

Featured Trip Ideas Card Carousel

Hashtags

Highlight List

Icon Cards

Location Access

Offer Cards Carousel

Offset Tout Collection

Porthole Tabber

Tabbed Content

Collage Hero

404 Hero

Experience Brand

Standard

Video

Homepage

Shared Board Hero

Themed Page Hero Video

Media Collage

Video

Image

Rich Media Atom

Thematic Callout

FAB

Navigation

Featured Highlight Item

Key Information Block

Responsive Table

Quote

Richtext

Campaign Tout

Credibility Tout

Large Image Tout

Standard Tout

Seasonal Container

Geolocated Container

Travel To

Hero

Datepicker

Social Share

Immersive Weather Tabs