Primer

HTML

<div class="inner">
	<div class="carousel  carousel--grey  ">
		<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="" alt="">
							 	<img src="" alt="">
							</picture>

							<div class="hero-summary__card">
								<h2 class="hero-summary-title">Title</h2>
								<p></p>
								<div class="hero-summary-link" href="#">Read 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="" alt="">
							 	<img src="" alt="">
							</picture>

							<div class="hero-summary__card">
								<h2 class="hero-summary-title">Title</h2>
								<p></p>
								<div class="hero-summary-link" href="#">Read 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="" alt="">
							 	<img src="" alt="">
							</picture>

							<div class="hero-summary__card">
								<h2 class="hero-summary-title">Title</h2>
								<p></p>
								<div class="hero-summary-link" href="#">Read 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",
            "read_more_text": "Read more",
            "url": "#",
            "image": "\/images\/mainsite5\/c19\/TheBIggerPicture_Thumbnail_Mobile.jpg"
        },
        "1": {
            "title": "Title",
            "read_more_text": "Read more",
            "url": "#",
            "image": "\/images\/mainsite5\/c19\/MumtazAndBeenish_Thumbnail.jpg"
        },
        "2": {
            "title": "Title",
            "read_more_text": "Read more",
            "url": "#",
            "image": "\/images\/mainsite5\/c19\/MumtazAndBeenish_Thumbnail Copy.jpg"
        }
    },
    "carousel_colour": "carousel--grey"
}