ASP.NET MVC / Bootstrap - Display Selected Item from List w/ navigation controls

Question

I have a partial view that I am returning to my home view. I want to be able to pass in a string array of values and then pass back the view. The view will allow for the list to be navigated through and control various things on the page. I need both previous and next buttons to traverse through the list.

Before I post my attempts, here is a picture of what I want. I am showing this first because I am all but certain my attempts is not the way to go and am 100% open to any solution that gets this done.

I've attempted to do this by with a carousel with little luck. One, i cant even get it to work correctly. Two, I cant get the appearance I want (see image above)

@model List<string>

<div class="well">
    <div class="carousel slide" id="av-agmt-car" data-interval="false">
        <div class="carousel-inner">

            @foreach (var item in Model)
            {
                string c = "";
                var i = 0;
                if (i == 0)
                {
                    c = "item active";

                }
                else
                {
                    c = "item";
                }
                <div class=@c>@item</div>
                i++;
            }

        </div>
        <a class="left carousel-control" href="#av-agmt-car" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#av-agmt-car" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>



</div>

Another thought would be to use pagination and some fancy javascript. I havent put the JS together but think i could manage it. I struggle with the css of this one to look appropriate.

@model List

<nav class="av-no-marg">
    <ul class="pagination">
        <li class="col-md-4">
            <div>
                <a class="left carousel-control" href="#" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
            </div>

        </li>
        <li class="col-md-4">
            <div>
                TEST
            </div>
        </li>
        <li class="col-md-4">
            <div>
                <a class="right carousel-control" href="#" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

        </li>
    </ul>
</nav>

Answer 1

I would change your @foreach loop to a for loop. If you declaring i inside a foreach loop, it'll stay at 0, unless you declare outside of the foreach loop. The below is untested code.

@for (var i = 0; i < Model.length; i++)
 {
  string c = "item";
  string item = Model.AtElement(i);
  if(i == 0)
  {
   c = "item active";
  }
  <text><div class=@c>@item</text>
}