<div id="carousel" class="carousel slide" data-ride="carousel">

  <div class="carousel-wrapper">

    <div class="carousel-bottom">

      <a href="javascript:void(0)" class="pause" title="Pause">
        <span class="sr-only">Pause</span>
        <i class="ion-ios-pause"></i>
      </a>

      <ol class="carousel-indicators">

        {{#each this.items}}

          <li data-target="#carousel" data-slide-to="{{@index}}" class="{{#iff @index '==' 0}}active{{/iff}}"></li>

        {{/each}}

      </ol>

    </div>

    <div class="carousel-inner" role="listbox">

      {{#each this.items}}

        <div class="fill item{{#iff @index '==' 0}} active{{/iff}}"
        style="background-image:url('{{this.image}}')" alt="{{this.title}}" title="{{this.title}}">
          <div class="carousel-overlay"></div>

          <div class="carousel-caption">
              <h2>{{this.title}}</h2>
              <p>{{this.subtitle}}</p>

              {{#if this.link}}
                <a href="{{this.link}}" class="button slide">Find out more</a>
              {{/if}}
          </div>
        </div>

      {{/each}}

    </div>

    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <i class="ion-chevron-left icon-prev" aria-hidden="true"></i>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <i class="ion-chevron-right icon-next" aria-hidden="true"></i>
      <span class="sr-only">Next</span>
    </a>

  </div>

    {{#if this.links}}

    <div class="carousel-links">

      <h4>{{this.links.heading}}</h4>

      <ul>
        {{#each this.links.items}}

          <li>

            <a href="{{this.link}}" title="{{this.title}}">
              <span>{{this.title}}</span>
              <i class="ion-ios-arrow-right"></i>
            </a>

          </li>

        {{/each}}
      </ul>

    </div>


  {{/if}}


</div>
