Dynamic carousel codeigniter - twitter-bootstrap-3

Question

I am making an content management system. I can upload a new content for my website, but having problem displaying the images to my carousel. All images that I've uploaded, it goes vertically.
For example: I uploaded 3 images it will looke like this
Image 1
Image 2
Image 3
Expected output:
<- Image 1 -> <- Image 2 -> <- Image 3 ->
Question: How can I put all my upload images in to my carousel?
View
<div class="container" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px;">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-width: 85.5%;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php foreach($content as $row):?>
<div class="item active">
<center><img src="<?= base_url().'assets/img/'.$row->content_image?>" width="100%" alt="Menu"></center>
</div>
<?php endforeach;?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Answer 1

<?php foreach($content as $row):?>
<div class="item active">
// ...
This means that every one of your carousel items has the active class. As the docs describe, only one of them should be active, and that's the one that will be displayed first.

Answer 2

To make an dynamic carousel as #Dont Panic said, you only have to select one active for all of your items
<!-- Indicators -->
<?php $count = 0;
$indicators = '';
foreach ($content as $row):
$count++;
if ($count === 1)
{
$class = 'active';
}
else
{
$class = '';
}?>
<div class="item <?php echo $class; ?>">
<center><img src="<?= base_url().'assets/img/'.$row->content_image?>" width="100%" alt="Menu"></center>
</div>
$indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>';
<?php endforeach;?>
And #Dont Panic made an dynamic indicator(indicator is the small circle) which is this.
$indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>' ;?><br>
I've encountered a minor issue, what if I only want to display all Active images/content and to my indicator?
In the code of #Don Panic it will still display all the images even though the other images are inactive.
Example:
I have 6 images,
4 images are active
2 images are inactive/deactivate
Scenario:
In my indicator it displayed 6 even though the active are only 4.
So I improved his code into this
<div class="carousel-inner" role="listbox">
<?php $count = 0;
$indicators = '';
foreach ($content as $row):
$count++;
if ($count === 1)
{
$class = 'active';
}
else
{
$class = '';
}?>
<?php if($row->status == 'Active'):
$indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>' ;?><br>
<div class="item <?php echo $class; ?>">
<center><img src="<?= base_url().'uploads/'.$row->content_image?>" width="100%" alt="Menu"></center>
</div>
<?php endif;?>
<?php endforeach;?>
<ol class="carousel-indicators">
<?= $indicators; ?>
</ol>
</div>
Now it only displayed 4 images and also the indicator.

Answer 3

enter image description here The below code might help you if you have listed images on a page(or)view and now you want the image to popup and in the popup you need a carousel, as in the image i have uploaded.enter image description here
note: that you have also fetched the no. of images i.e count by using num_row();
note: in header you have added these cdn
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"><!--BS CSS CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!--CDN FOR JQUERY-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><!--CDN FOR AJAX-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><!--BOOTSTRAP CDN-->
#model(gallery_m)
//FUNCTION TO COUNT THE NO. OF ROWS/IMAGES IN A DATABASE
public function count()
{
$this->db->select('*');
$q=$this->db->get('images');
if($q)PART ELSE IT WILL JUMP TO THE ELSE PART
{
return $q->num_rows();ADMIN/GALLERY()
}
else
{
return false;
}
}
//FUNCTION TO GET IMAGES FROM DATABASE
public function gallery()
{
$this->db->select('*');
$q= $this->db->get('images');
if($q->num_rows()>0)
{
return $q->result();
}
else
{
return false;
}
}
#controller(Admin)
public function gallery()
{
$this->load->model('gallery_m');
$data['images']= $this->gallery_m->gallery();
$data['count']= $this->gallery_m->count();
if($data['images'])
{
$this->load->view('gallery', $data);
}
}
#view(gallery)
<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg"><!--MODEL-LG IS USED FOR BIGGER MODEL-->
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">Gallery</div><!--HEADER TITLE-->
<button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button><!--USING THE REMOVE MODEL ICON-->
</div>
<div class="modal-body">
<!--CAROUSEL CODE GOES HERE-->
<!--begin carousel-->
<div id="myGallery" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php for($i=1; $i <= $count; $i++):?><!--USING FORLOOP TO MAKE THE FIRST ITEM ACTIVE WHEN CONDITION $==1 IS SATISFIED-->
<?php if($i==1)
{
?>
<div class="carousel-item active"><img src="<?= $image->image ?>" alt="images" style="height: 800px; width:916px">
</div>
<?php
}
else
{
?>
<?php foreach($images as $image):?><!--USE OF SECOND FOREACH TO DISPLAY IMAGES THAT WE FERCHED FROM DATABASE-->
<div class="carousel-item"> <img src="<?= $image->image ?>" alt="images" style="height: 600px; width:916px">
</div>
<?php endforeach;?><!--END OF SECOND FOREACH LOOP-->
<?php
}
?>
<?php endfor;?><!--END OF FORLOOP-->
<!--end carousel-inner--></div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myGallery" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myGallery" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div><!--end carousel-->
</div> <!--end modal-body-->
<div class="modal-footer">
<div class="pull-left">
</div>
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialoge-->
</div><!--end myModal-->
<!-- Delete Button-->
<button type="submit" class="btn btn-danger remove" id="<?= $image->id?>"> Delete</button>
<!--Update anchor-tag-->
<?=anchor("admin/edit/{$image->id}", 'Edit', ['class'=>'btn btn-primary']);?>
<?php endforeach;?>