Bootstrap Carousel with Repeating Regions

Hi, I need to use the Bootstrap Carousel in Perch. I'm looking to setup a repeating region for the slide image and alt tag, however I've hit a bit of a snag.

Here's my template/content code...

<perch:before>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- CAROUSEL -->
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
</perch:before>  

       <div class="item active">
          <img src="<perch:content type="image" id="image" label="Image" help="*NOTE: Image must be 2000px wide and 500px high" width="2000" height "500" crop="true"/>" alt="<perch:content type="text" id="alt" label="Description of photo for sight impared" required="true" 
          help="e.g. Photo of pupils playing sports" title="true" />">
          <div class="carousel-caption"></div>
        </div>

<perch:after>

    </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
      </a>
    </div>

</perch:after>

The first slide in the carousel needs to have the classes item active but the subsequent slides only need the class item. Repeating the active class on all slides results in an error.

Is there a way of having the active class only inserted on the first region? Cheers!