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">×</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!