Carousel {% include 'components/carousel/carousel' %}
#
HTML
<div class="inner">
    <div class="carousel ">
        <div class="carousel__tiles">
            <div class="carousel__tile">
                <!-- START CAROUSEL TILE CONTENT -->
                <a href="#" class="hero-summary">
                    <picture >
                        <source media="(min-width: 647px)" srcset="">
                            <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                <img src="http://placehold.it/400x300" alt="">
                            </picture>
                            <div class="hero-summary__card">
                                <h2 class="hero-summary-title">
                                    Title
                                </h2>
                                <p>A short summary text block goes in here to give more information about this section.</p>
                                <div class="hero-summary-link" href="#">See more</div>
                            </div>
                        </a>
                        <!-- END CAROUSEL TILE CONTENT -->
                    </div>
                    <div class="carousel__tile">
                        <!-- START CAROUSEL TILE CONTENT -->
                        <a href="#" class="hero-summary">
                            <picture >
                                <source media="(min-width: 647px)" srcset="">
                                    <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                        <img src="http://placehold.it/400x300" alt="">
                                    </picture>
                                    <div class="hero-summary__card">
                                        <h2 class="hero-summary-title">
                                            Title
                                        </h2>
                                        <p>A short summary text block goes in here to give more information about this section.</p>
                                        <div class="hero-summary-link" href="#">See more</div>
                                    </div>
                                </a>
                                <!-- END CAROUSEL TILE CONTENT -->
                            </div>
                            <div class="carousel__tile">
                                <!-- START CAROUSEL TILE CONTENT -->
                                <a href="#" class="hero-summary">
                                    <picture >
                                        <source media="(min-width: 647px)" srcset="">
                                            <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                <img src="http://placehold.it/400x300" alt="">
                                            </picture>
                                            <div class="hero-summary__card">
                                                <h2 class="hero-summary-title">
                                                    Title
                                                </h2>
                                                <p>A short summary text block goes in here to give more information about this section.</p>
                                                <div class="hero-summary-link" href="#">See more</div>
                                            </div>
                                        </a>
                                        <!-- END CAROUSEL TILE CONTENT -->
                                    </div>
                                    <div class="carousel__tile">
                                        <!-- START CAROUSEL TILE CONTENT -->
                                        <a href="#" class="hero-summary">
                                            <picture >
                                                <source media="(min-width: 647px)" srcset="">
                                                    <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                        <img src="http://placehold.it/400x300" alt="">
                                                    </picture>
                                                    <div class="hero-summary__card">
                                                        <h2 class="hero-summary-title">
                                                            Title
                                                        </h2>
                                                        <p>A short summary text block goes in here to give more information about this section.</p>
                                                        <div class="hero-summary-link" href="#">See more</div>
                                                    </div>
                                                </a>
                                                <!-- END CAROUSEL TILE CONTENT -->
                                            </div>
                                            <div class="carousel__tile">
                                                <!-- START CAROUSEL TILE CONTENT -->
                                                <a href="#" class="hero-summary">
                                                    <picture >
                                                        <source media="(min-width: 647px)" srcset="">
                                                            <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                                <img src="http://placehold.it/400x300" alt="">
                                                            </picture>
                                                            <div class="hero-summary__card">
                                                                <h2 class="hero-summary-title">
                                                                    Title
                                                                </h2>
                                                                <p>A short summary text block goes in here to give more information about this section.</p>
                                                                <div class="hero-summary-link" href="#">See more</div>
                                                            </div>
                                                        </a>
                                                        <!-- END CAROUSEL TILE CONTENT -->
                                                    </div>
                                                    <div class="carousel__tile">
                                                        <!-- START CAROUSEL TILE CONTENT -->
                                                        <a href="#" class="hero-summary">
                                                            <picture >
                                                                <source media="(min-width: 647px)" srcset="">
                                                                    <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                                        <img src="http://placehold.it/400x300" alt="">
                                                                    </picture>
                                                                    <div class="hero-summary__card">
                                                                        <h2 class="hero-summary-title">
                                                                            Title
                                                                        </h2>
                                                                        <p>A short summary text block goes in here to give more information about this section.</p>
                                                                        <div class="hero-summary-link" href="#">See more</div>
                                                                    </div>
                                                                </a>
                                                                <!-- END CAROUSEL TILE CONTENT -->
                                                            </div>
                                                            <div class="carousel__tile">
                                                                <!-- START CAROUSEL TILE CONTENT -->
                                                                <a href="#" class="hero-summary">
                                                                    <picture >
                                                                        <source media="(min-width: 647px)" srcset="">
                                                                            <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                                                <img src="http://placehold.it/400x300" alt="">
                                                                            </picture>
                                                                            <div class="hero-summary__card">
                                                                                <h2 class="hero-summary-title">
                                                                                    Title
                                                                                </h2>
                                                                                <p>A short summary text block goes in here to give more information about this section.</p>
                                                                                <div class="hero-summary-link" href="#">See more</div>
                                                                            </div>
                                                                        </a>
                                                                        <!-- END CAROUSEL TILE CONTENT -->
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
Twig
<div class="inner">
	<div class="carousel {% if carousel_colour %} {{ carousel_colour }} {% endif %} {% if carousel_single %} carousel--single{% endif %}">
		<div class="carousel__tiles">
			{% for item in carousel_items %}
				<div class="carousel__tile">
					{% if carousel_single %}

						<div class="carousel__tile--content">
							<h2>{{ item.title }} <span>{{ item.sub_title }}</span></h2>
							<a href="#" class="secondary-button desktop-only">Read more</a>
						</div>
						<div class="carousel__tile--image">
							
							{% if item.video %}

								<video autoplay="autoplay" muted loop>
								  <source src="{{ item.video }}" type="video/mp4">
								  <source src="{{ item.video }}" type="video/ogg">
								  <source src="{{ item.video }}" type="video/webm">
								  Your browser does not support HTML5 video.
								</video>

							{% else %}

								<picture class="parralax-up image-quote__image-{{ image.position }}">
									
								  	<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
								 	<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
								 	<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
								</picture>

							{% endif %}

							<a href="#" class="secondary-button mobile-only">Read more</a>
						</div>

					{% else %}
						<!-- START CAROUSEL TILE CONTENT -->
						<a href="{{ item.url }}" class="hero-summary">

							<picture >
								
							  	<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
							 	<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
							 	<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
							</picture>

							<div class="hero-summary__card">
								<h2 class="hero-summary-title">{{ item.title }}</h2>
								<p>{{ item.summary }}</p>
								<div class="hero-summary-link" href="{{ item.url }}">{{ item.read_more_text }}</div>
							</div>
						</a>
						<!-- END CAROUSEL TILE CONTENT -->
					{% endif %}
				</div>
			{% endfor %}
		</div>
	</div>
</div>
{
    "carousel_items": {
        "0": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "1": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "2": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "3": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "4": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "5": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "6": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        }
    }
}