CodeIgniter Forums

Full Version: [Solved] Codeigniter Foreach with Bootstrap Carousal Indicators & Controls
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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 -->
<
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>
<
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> 
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>