<? if ( is_array( $this -> images ) ):?>
  <div id="carousel-<?= $this -> article_id;?>-<?= $this -> i;?>" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <? for ( $i = 0; $i < count( $this -> images ); $i++ ):?>
        <li data-target="#carousel-<?= $this -> article_id;?>-<?= $this -> i;?>" data-slide-to="<?= $i;?>" class="<? if ( $i == 0 ):?>active<? endif;?>"></li>
      <? endfor;?>
    </ol>
    <div class="carousel-inner">
      <? for ( $i = 0; $i < count( $this -> images ); $i++ ):?>
      <div class="item <? if ( $i == 0 ):?>active<? endif;?>">
        <img src="<?= $this -> images[$i][0];?>" alt="<?= $this -> images[$i][3];?>">
        <? if ( $this -> images[$i][1] or $this -> images[$i][2] ):?>
          <div class="carousel-caption">
            <? if ( $this -> images[$i][1] ):?>
              <h3><?= $this -> images[$i][1];?></h3>
            <? endif;?>
            <? if ( $this -> images[$i][2] ):?>
              <p><?= $this -> images[$i][2];?></p>
            <? endif;?>
          </div>
        <? endif;?>
      </div>
      <? endfor;?>
    </div>
    <a class="left carousel-control" href="#carousel-<?= $this -> article_id;?>-<?= $this -> i;?>" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-<?= $this -> article_id;?>-<?= $this -> i;?>" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
<? endif;?>