<div class="weather-tabs" data-module="weatherTabs">
<div class="weather-tabs-nav js-weather-tabs-nav">
<div class="weather-tabs-nav__dropdown js-dropdown">
<p class="weather-tabs-nav__dropdown-text js-dropdown-text">Whipping wind</p>
</div>
<div class="weather-tabs-nav__timer">
<div class="carousel-timer" data-module="carouselTimer">
<div class="carousel-timer__controls js-timer active">
<svg class="carousel-timer__controls-circle">
<circle r="27" cx="33" cy="33"></circle>
</svg>
<div class="carousel-timer__button carousel-timer__button--pause js-pause"></div>
<div class="carousel-timer__button carousel-timer__button--play js-play disabled"></div>
</div>
</div>
</div>
<div class="weather-tabs-nav__list-wrapper">
<ul class="weather-tabs-nav__list">
<li class="weather-tabs-nav__list-item js-list-item is-active" data-tab-index="content-1">Whipping wind</li>
<li class="weather-tabs-nav__list-item js-list-item" data-tab-index="content-2">Glistening sunshine</li>
<li class="weather-tabs-nav__list-item js-list-item" data-tab-index="content-3">Winter mornings</li>
<li class="weather-tabs-nav__list-item js-list-item" data-tab-index="content-4">Fresh spring</li>
</ul>
</div>
</div>
<div class="carousel">
<div class="carousel__slider">
<div class="carousel__slide cell" style="padding: 0" data-type="content-1">
<div class="weather-slide is-active" data-tab-id="content-1">
<div class="weather-slide__background">
<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-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=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-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Alt Text">
</picture>
</figure>
<p class="weather-slide__text-overlay">Rain</p>
</div>
<div class="weather-slide__inner">
<div class="grid-container">
<div class="grid-x">
<div class="weather-slide__content cell medium-8 medium-offset-2">
<p class="weather-slide__title">Exhilarating moments</p>
<p class="weather-slide__subtitle">The journey of a lifetime awaits along 2,500km of coastal road on the Wild Atlantic Way. Pack your bags, leave the everyday behind you and get ready to embrace the best of the west.</p>
<p class="weather-slide__location">Belfast</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell" style="padding: 0" data-type="content-2">
<div class="weather-slide" data-tab-id="content-2">
<div class="weather-slide__background">
<div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
<template class="js-small-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline muted loop class="video__player js-video-player">
<source src="/media/weather-tabber/sun-8-v3.mp4" type="video/mp4" />
</video>
</div>
</template>
<template class="js-medium-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline muted loop class="video__player js-video-player">
<source src="/media/weather-tabber/sun-8-v3.mp4" type="video/mp4" />
</video>
</div>
</template>
<div class="js-video-container video__container"></div>
</div>
<p class="weather-slide__text-overlay">Sun</p>
</div>
<div class="weather-slide__inner">
<div class="grid-container">
<div class="grid-x">
<div class="weather-slide__content cell medium-8 medium-offset-2">
<p class="weather-slide__title">Glistening sunshine</p>
<p class="weather-slide__subtitle">Static Hero: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.</p>
<p class="weather-slide__location">Belfast</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell" style="padding: 0" data-type="content-3">
<div class="weather-slide" data-tab-id="content-3">
<div class="weather-slide__background">
<div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
<template class="js-small-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline muted loop class="video__player js-video-player">
<source src="/media/weather-tabber/frost-8-v4.mp4" type="video/mp4" />
</video>
</div>
</template>
<template class="js-medium-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline muted loop class="video__player js-video-player">
<source src="/media/weather-tabber/frost-8-v4.mp4" type="video/mp4" />
</video>
</div>
</template>
<div class="js-video-container video__container"></div>
</div>
<p class="weather-slide__text-overlay">Frost</p>
</div>
<div class="weather-slide__inner">
<div class="grid-container">
<div class="grid-x">
<div class="weather-slide__content cell medium-8 medium-offset-2">
<p class="weather-slide__title">Winter mornings</p>
<p class="weather-slide__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.</p>
<p class="weather-slide__location">Belfast</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell" style="padding: 0" data-type="content-4">
<div class="weather-slide" data-tab-id="content-4">
<div class="weather-slide__background">
<div class="video" data-youtube-video="true" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true" data-ratio="">
<template class="js-youtube-template">
<iframe src="https://www.youtube-nocookie.com/embed/398IVitaZoY?playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</template>
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<div class="video__player js-video-player"></div>
</div>
</div>
<p class="weather-slide__text-overlay">Wind</p>
</div>
<div class="weather-slide__inner">
<div class="grid-container">
<div class="grid-x">
<div class="weather-slide__content cell medium-8 medium-offset-2">
<p class="weather-slide__title">Fresh spring</p>
<p class="weather-slide__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.</p>
<p class="weather-slide__location">Belfast</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="weather-tabs" data-module="weatherTabs">
{{#if tabs}}
{{> @cp-weather-tabs-nav}}
{{/if}}
<div class="carousel">
<div class="carousel__slider">
{{#each slides}}
<div class="carousel__slide cell" style="padding: 0" data-type="{{id}}">
{{> @cp-weather-slide}}
</div>
{{/each}}
</div>
</div>
</div>
{
"title": "Experience the wonder of Ireland",
"subtitle": "From breathtaking landscapes and rural idylls to buzzing urban hubs and amazing festivals, it's all waiting to be discovered.",
"tabs": [
{
"text": "Whipping wind",
"target": "content-1"
},
{
"text": "Glistening sunshine",
"target": "content-2"
},
{
"text": "Winter mornings",
"target": "content-3"
},
{
"text": "Fresh spring",
"target": "content-4"
}
],
"slides": [
{
"id": "content-1",
"title": "Exhilarating moments",
"subtitle": "The journey of a lifetime awaits along 2,500km of coastal road on the Wild Atlantic Way. Pack your bags, leave the everyday behind you and get ready to embrace the best of the west.",
"locationName": "Belfast",
"textOverlay": "Rain",
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1516213871872-94b6517a6ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
}
]
}
},
{
"id": "content-2",
"title": "Glistening sunshine",
"subtitle": "Static Hero: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.",
"locationName": "Belfast",
"textOverlay": "Sun",
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1485395578879-6ba080c9cdba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1485395578879-6ba080c9cdba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1485395578879-6ba080c9cdba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1485395578879-6ba080c9cdba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
}
]
},
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/mp4",
"url": "/media/weather-tabber/sun-8-v3.mp4"
}
],
"mobileVideoUrls": [
{
"type": "video/mp4",
"url": "/media/weather-tabber/sun-8-v3.mp4"
}
],
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
}
},
{
"id": "content-3",
"title": "Winter mornings",
"subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.",
"locationName": "Belfast",
"textOverlay": "Frost",
"backgroundResponsiveImage": null,
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/mp4",
"url": "/media/weather-tabber/frost-8-v4.mp4"
}
],
"mobileVideoUrls": [
{
"type": "video/mp4",
"url": "/media/weather-tabber/frost-8-v4.mp4"
}
],
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
}
},
{
"id": "content-4",
"title": "Fresh spring",
"subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida magna tellus, sit amet finibus nisi cursus quis.",
"locationName": "Belfast",
"textOverlay": "Wind",
"backgroundResponsiveImage": null,
"fullVideo": {
"isYouTube": true,
"video": {
"videoId": "398IVitaZoY",
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
}
}
]
}
There are no notes for this item.