I'm trying to use a foreach loop for a slider but having issues with adding 1 to the counter on each pass.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
  
 @{
   var promoItems = CurrentPage.HeroRepositories.First().HeroItems.Where("Visible");
    int bannerCount=1;
   }
 
<div class="visible-lg">
    <ul class='kwicks kwicks-horizontal'>
       @foreach (var item in promoItems){
        <li id="panel-@bannerCount"><img style="max-width:inherit;" src="@item.GetCropUrl("bannerImage", "heroimage-w800-h400")" alt=""><div class="slide-description"><h1>@item.Title</h1><h4>@item.subheading</h4></div></li>
      @bannerCount++    
}
    </ul>
</div>