<div class="homepage-hero" data-module="homepageHero" data-points="0,5.9,11.9,17.9" data-preload="true">
<div class="hero-controls hero-controls--left">
<div class="hero-controls__timer js-hero-timer active">
<svg class="hero-controls__timer-circle">
<circle r="27" cx="33" cy="33"></circle>
</svg>
<div class="hero-controls__button hero-controls__button--pause js-hero-pause"></div>
<div class="hero-controls__button hero-controls__button--play js-hero-play disabled"></div>
</div>
</div>
<div class="cell homepage-hero-slide">
<div class="homepage-hero-slide__background">
<div class="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted="">
<template class="js-small-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline autoplay muted loop class="video__player js-video-player">
<source src="/media/homepage-hero/TI_Hompage_video_mobile2.mp4" type="video/mp4" />
<source src="/media/homepage-hero/TI_Hompage_video_mobile2.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 autoplay muted loop class="video__player js-video-player">
<source src="/media/homepage-hero/TI_Hompage_video_21-9.mp4" type="video/mp4" />
</video>
</div>
</template>
<div class="js-video-container video__container"></div>
</div>
</div>
<div class="homepage-hero-slide__inner homepage-hero-slide__inner--green-button js-homepage-hero-slide active" data-index="0">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-10 medium-offset-1">
<div class="homepage-hero-slide__content">
<div class="homepage-hero-slide__meta ">
<p class="homepage-hero-slide__eyebrow">Welcome back to Ireland</p>
</div>
<h1 class="homepage-hero-slide__title">Press the big green button</h1>
<a href="#" class="green-button green-button--green-button " data-module="greenButton">
<span class="green-button__base"></span>
<span class="green-button__side"></span>
<span class="green-button__top"></span>
<span class="green-button__text">The Green Button</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="homepage-hero-slide__inner js-homepage-hero-slide " data-index="1">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-8 medium-offset-2">
<div class="homepage-hero-slide__content">
<div class="homepage-hero-slide__meta homepage-hero-slide__meta--icon-only">
</div>
<h1 class="homepage-hero-slide__title">Into the wild</h1>
<a href="#" class="button-p1 button-p1--default " role="button">Find your trip</a>
</div>
</div>
</div>
</div>
</div>
<div class="homepage-hero-slide__inner homepage-hero-slide__inner--fill-your-heart js-homepage-hero-slide " data-index="2">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-8 medium-offset-2">
<div class="homepage-hero-slide__content">
<div class="homepage-hero-slide__meta homepage-hero-slide__meta--icon-only">
</div>
<h1 class="homepage-hero-slide__title">Fill Your Heart</h1>
<a href="#" class="heart-button heart-button--fill-your-heart " data-module="heartButton">
<span class="heart-button__circle"></span>
</a>
<div class="heart-button__clip-path">
<svg width="1" height="1" viewbox="0.006, 0, 1, 1" xmlns="http://www.w3.org/2000/svg">
<clipPath id="heartClip" clipPathUnits="userSpaceOnUse">
<path d="M134.9 33.5253C134.744 31.8954 134.473 30.2865 134.092 28.6985C131.692 18.6913 125.171 10.0911 116.252 5.11763C110.47 1.89323 104.256 0.340651 97.6851 0.159844C95.2562 0.093024 92.839 0.26335 90.4322 0.610552C87.7791 0.993129 85.1856 1.62071 82.6453 2.48151C78.1492 4.00396 74.0004 6.20902 70.1394 8.97878C69.9191 9.136 69.7078 9.30764 69.4745 9.4439C68.4713 10.0296 67.4656 10.0269 66.4702 9.42293C66.2045 9.26178 65.953 9.07311 65.6964 8.89754C62.3033 6.57719 58.7287 4.6001 54.9117 3.08158C49.8829 1.08091 44.6687 0.0432365 39.2589 0C38.4929 0.0379957 37.7269 0.0812322 36.9609 0.111367C35.4056 0.172946 33.8646 0.358994 32.3287 0.609241C29.2868 1.1045 26.346 1.95088 23.5063 3.15495C17.6726 5.6286 12.7475 9.33777 8.81254 14.3467C4.02999 20.4351 1.41708 27.3844 0.962158 35.1434C0.806628 37.8044 0.915499 40.4654 1.32895 43.1055C1.73074 45.6748 2.32694 48.1969 3.10977 50.6745C4.56139 55.2654 6.56902 59.6008 8.99529 63.7424C11.848 68.6124 15.2113 73.0985 18.9596 77.2937C24.1362 83.0861 29.8869 88.2313 36.1185 92.834C41.2795 96.6453 46.6491 100.132 52.1653 103.39C54.9571 105.04 57.7851 106.624 60.643 108.154C63.5734 109.722 66.684 110.299 69.967 109.855C71.7478 109.614 73.434 109.048 75.0282 108.203C81.4387 104.804 87.6949 101.138 93.7346 97.1026C98.4951 93.9214 103.105 90.5359 107.429 86.7625C112.148 82.6433 116.53 78.1912 120.451 73.2845C123.598 69.3448 126.397 65.1705 128.734 60.6857C131.632 55.1239 133.753 49.2922 134.693 43.0531C134.922 41.5385 135.046 40.0147 135.091 38.4857C135.139 36.8296 135.058 35.1775 134.9 33.5266V33.5253Z" />
</clipPath>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="homepage-hero-slide__inner js-homepage-hero-slide " data-index="3">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-10 medium-offset-1">
<div class="homepage-hero-slide__content">
<div class="homepage-hero-slide__meta homepage-hero-slide__meta--icon-only">
<div class="homepage-hero-slide__icon"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 71'>
<path d='M19 49.557L0 65.5V16.443L19 .5v49.057zM65 49.557L46 65.5V16.443L65 .5v49.057z' />
<path fill-rule='evenodd' clip-rule='evenodd' d='M19 .5v48.75L46 65.5V16.75L19 .5zm3.24 5.74v41.17l20.52 12.35V18.59L22.24 6.24z' />
</svg></div>
</div>
<h1 class="homepage-hero-slide__title">City adventures</h1>
<a href="#" class="button-p1 button-p1--default " role="button">Find your trip</a>
</div>
</div>
</div>
</div>
</div>
</div>
<ol class="homepage-hero__page-dots">
<li class="dot js-homepage-hero-dot" data-index="0"></li>
<li class="dot js-homepage-hero-dot" data-index="1"></li>
<li class="dot js-homepage-hero-dot" data-index="2"></li>
<li class="dot js-homepage-hero-dot" data-index="3"></li>
</ol>
<div class="hero-controls hero-controls--right">
<div class="hero-controls__button hero-controls__button--prev js-hero-prev"></div>
<div class="hero-controls__button hero-controls__button--next js-hero-next"></div>
</div>
</div>
<div class="homepage-hero" data-module="homepageHero" data-points="{{points}}" data-preload="true">
{{> @cp-hero-controls isTimer=true modifier="left"}}
<div class="cell homepage-hero-slide">
<div class="homepage-hero-slide__background">
{{#if fullVideo}}
{{> @cp-medium-video doNotInitialise=true isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=true hideControls=true loop=true }}
{{/if}}
</div>
{{#each slides}}
{{> @cp-homepage-hero-slide}}
{{/each}}
</div>
<ol class="homepage-hero__page-dots">
{{#each slides}}
<li class="dot js-homepage-hero-dot" data-index="{{@index}}"></li>
{{/each}}
</ol>
{{> @cp-hero-controls modifier="right"}}
</div>
{
"preload": true,
"points": [
0,
5.9,
11.9,
17.9
],
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/mp4",
"url": "/media/homepage-hero/TI_Hompage_video_21-9.mp4"
}
],
"mobileVideoUrls": [
{
"type": "video/mp4",
"url": "/media/homepage-hero/TI_Hompage_video_mobile2.mp4"
},
{
"type": "video/mp4",
"url": "/media/homepage-hero/TI_Hompage_video_mobile2.mp4"
}
],
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
},
"slides": [
{
"eyebrow": "Welcome back to Ireland",
"title": "Press the big green button",
"textNoWrap": false,
"modifier": "green-button",
"button": {
"url": "#",
"text": "The Green Button"
}
},
{
"title": "Into the wild",
"textNoWrap": true,
"button": {
"url": "#",
"text": "Find your trip"
}
},
{
"title": "Fill Your Heart",
"modifier": "fill-your-heart",
"textNoWrap": true,
"button": {
"url": "#",
"text": "Find your trip"
}
},
{
"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 71'><path d='M19 49.557L0 65.5V16.443L19 .5v49.057zM65 49.557L46 65.5V16.443L65 .5v49.057z' /><path fill-rule='evenodd' clip-rule='evenodd' d='M19 .5v48.75L46 65.5V16.75L19 .5zm3.24 5.74v41.17l20.52 12.35V18.59L22.24 6.24z'/></svg>",
"title": "City adventures",
"textNoWrap": false,
"button": {
"url": "#",
"text": "Find your trip"
}
}
]
}
There are no notes for this item.