[Solved] Codeigniter Foreach with Bootstrap Carousal Indicators & Controls

On my bootstrap carousal I am creating one with a foreach loop.

My Question is: Since the carousal-inner is set up in a foreach loop how can I make the carousal indicators work with foreach loop so I do not have to create one each time and the same for the controls?

Any suggestions.


Indicators

PHP Code:

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


Controls

PHP Code:

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


Carousal 

PHP Code:

<div id="carousel-example-generic" class="carousel slide" data-ride="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">

<?php $item_class = 'active';?>
<?php foreach ($page_extra_image_popup as $banner) { ?>
<div class="item <?php echo $item_class;?>">
<!--<img src="holder.js/100%x420" alt="...">-->
<img src="<?php echo $banner['page_extra_image_popup'];?>" alt="...">
<div class="carousel-caption">
</div>
</div>
<?php $item_class = '';?>
<?php } ?>

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


There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

I got it working now with the indicators 

Code:

<ol class="carousel-indicators">
<?php foreach ($page_extra_image_popup as $i => $banner) { ?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $i;?>" <?php echo !$i ? ' class="active"' : ''; ?>></li>
<?php }?>
</ol>

Controls

PHP Code:

<!-- Controls -->
<?php if (count($page_extra_image_popup) > 1) { ?>
<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>
<?php }?>
</div> 


Bootstrap Modal with carousal

PHP Code:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Extra Images Popup</h4>
</div>
<div class="modal-body">

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

<!-- Indicators -->

<ol class="carousel-indicators">
<?php foreach ($page_extra_image_popup as $i => $banner) { ?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $i;?>" <?php echo !$i ? ' class="active"' : ''; ?>></li>
<?php }?>
</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<?php $item_class = 'active';?>
<?php foreach ($page_extra_image_popup as $banner) { ?>
<div class="item <?php echo $item_class;?>">
<!--<img src="holder.js/100%x420" alt="...">-->
<img src="<?php echo $banner['page_extra_image_popup'];?>" alt="...">
<div class="carousel-caption">
</div>
</div>
<?php $item_class = '';?>
<?php } ?>

</div>

<!-- Controls -->
<?php if (count($page_extra_image_popup) > 1) { ?>
<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>
<?php }?>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- Modal Content -->
</div><!-- Modal-dialog -->
</div> 


There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!