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

    <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="item{{#iff @index '==' 0}} active{{/iff}}">
          <div class="carousel-overlay"></div>

          <div class="bg-wrapper">
            <img src="{{this.background}}" alt="{{this.title}}" title="{{this.title}}" class="hidden-xs">
            <img src="{{this.image}}" alt="{{this.title}}" title="{{this.title}}" class="visible-xs">
          </div>

          <div class="carousel-caption">
             <img src="{{this.image}}" alt="{{this.title}}" title="{{this.title}}" class="pic">

                <div class="text">
                  <h2>{{this.title}}</h2>
                  <p>{{this.subtitle}}</p>

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

          </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>
