Homepage 

<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  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 ">
                                <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>
                                <p class="homepage-hero-slide__eyebrow">The Great Outdoors</p>
                            </div>
                            <h1 class="homepage-hero-slide__title">Travel through time</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  js-homepage-hero-slide " data-index="1">
            <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 ">
                                <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>
                                <p class="homepage-hero-slide__eyebrow">The Great Outdoors</p>
                            </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  js-homepage-hero-slide " data-index="2">
            <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 ">
                                <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>
                                <p class="homepage-hero-slide__eyebrow">The Great Outdoors</p>
                            </div>
                            <h1 class="homepage-hero-slide__title">On the road</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  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 ">
                                <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>
                                <p class="homepage-hero-slide__eyebrow">The Great Outdoors</p>
                            </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": [
    {
      "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>",
      "eyebrow": "The Great Outdoors",
      "title": "Travel through time",
      "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>",
      "eyebrow": "The Great Outdoors",
      "title": "Into the wild",
      "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>",
      "eyebrow": "The Great Outdoors",
      "title": "On the road",
      "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>",
      "eyebrow": "The Great Outdoors",
      "title": "City adventures",
      "button": {
        "url": "#",
        "text": "Find your trip"
      }
    }
  ]
}

There are no notes for this item.