Carousel Single {% include 'components/carousel/carousel~single' %}
#
HTML
<div class="inner">
    <div class="carousel carousel--single">
        <div class="carousel__tiles">
            <div class="carousel__tile">
                <div class="carousel__tile--content">
                    <h2>
                        It starts with a sewing machine <span>Dorcas&#039; story</span>
                    </h2>
                    <a href="#" class="secondary-button desktop-only">Read more</a>

                </div>
                <div class="carousel__tile--image">
                    <picture class="parralax-up image-quote__image-">
                        <source media="(min-width: 647px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg">
                            <source media="(min-width: 375px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg" alt="">
                                <img src="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg" alt="">
                            </picture>
                            <a href="#" class="secondary-button mobile-only">Read more</a>

                        </div>
                    </div>
                    <div class="carousel__tile">
                        <div class="carousel__tile--content">
                            <h2>
                                It starts with a tree <span>Dorcas&#039; story</span>
                            </h2>
                            <a href="#" class="secondary-button desktop-only">Read more</a>

                        </div>
                        <div class="carousel__tile--image">
                            <picture class="parralax-up image-quote__image-">
                                <source media="(min-width: 647px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg">
                                    <source media="(min-width: 375px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg" alt="">
                                        <img src="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg" alt="">
                                    </picture>
                                    <a href="#" class="secondary-button mobile-only">Read more</a>

                                </div>
                            </div>
                            <div class="carousel__tile">
                                <div class="carousel__tile--content">
                                    <h2>
                                        It starts with a chicken <span>Joys story</span>
                                    </h2>
                                    <a href="#" class="secondary-button desktop-only">Read more</a>

                                </div>
                                <div class="carousel__tile--image">
                                    <video autoplay="autoplay" muted loop>
                                        <source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/mp4">
                                            <source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/ogg">
                                                <source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/webm">
                                                    Your browser does not support HTML5 video.

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

                                            </div>
                                        </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": "It starts with a sewing machine",
            "read_more_text": "Read more",
            "sub_title": "Dorcas' story",
            "url": "#",
            "desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg",
            "mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg"
        },
        "1": {
            "title": "It starts with a tree",
            "read_more_text": "Read more",
            "sub_title": "Dorcas' story",
            "url": "#",
            "desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg",
            "mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg"
        },
        "2": {
            "title": "It starts with a chicken",
            "read_more_text": "Read more",
            "sub_title": "Joys story",
            "url": "#",
            "desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Joy_Chicken_Desktop.jpg",
            "mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Joy_Chicken_Desktop.jpg",
            "video": "\/images\/mainsite5\/videos\/mainsite5\/ChickenVideo_Desktop_1080px-compress.mp4"
        }
    },
    "carousel_single": true
}