动态轮播编码器

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

例如：我上传了 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>

<?php foreach($content as $row):?>
    <div class="item active">
    // ...

这意味着您的每个轮播项目都具有active类。正如文档所描述的，其中只有一个应该处于活动状态，那就是将首先显示的那个。

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

即可

<!-- 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恐慌做了一个动态指标（指标是小圆圈），就是这个。

 $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 张图像和指示器。

在此处输入图像描述如果您在页面（或）视图上列出了图像，现在您希望弹出图像，并且在弹出窗口中需要一个轮播，就像我上传的图像一样，下面的代码可能会对您有所帮助。在此处输入图像描述

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

相关内容

最新更新

热门标签：