动态轮播代码点火器

Question

我正在制作一个内容管理系统。我可以为我的网站上传新内容，但无法将图像显示到我的轮播。我上传的所有图片都是垂直的。

例如：我上传了 3 张图片，它看起来像这样

Image 1
Image 2
Image 3

预期输出：

<- Image 1 -> <- Image 2 -> <- Image 3 ->

问题：如何将所有上传的图片放入轮播？

查看

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

这意味着您的每个轮播项目都有active 类。 As the docs describe，只有其中一个应该处于活动状态，并且是最先显示的那个。

Answer 2

如@Dont Panic 所说，要制作动态轮播，您只需为所有项目选择一个活动的

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

而@Dont Panic 做了一个动态指标（指标是小圆圈）就是这个。

 $indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>' ;?><br> 

我遇到了一个小问题，如果我只想显示所有活动图像/内容和我的指示器怎么办？

在@Don Panic 的代码中，即使其他图像处于非活动状态，它仍会显示所有图像。

例子：

I have  6 images,
4 images are active
2 images are inactive/deactivate

场景：

 In my indicator it displayed 6 even though the active are only 4.

所以我把他的代码改进成了这个

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

现在它只显示了 4 张图片和指示器。

Answer 3

enter image description here 如果您在页面（或）视图上列出了图像并且现在您希望弹出图像并且在弹出窗口中您需要一个轮播，那么下面的代码可能会对您有所帮助，就像我上传的图像一样。@ 987654322@

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