I am trying to make my bootstrap carousel dynamic in codeiginter here is what i have so far

Model Fucntion

        function get_all_images(){
            $query = $this->db->query("SELECT *  FROM property AS p INNER JOIN property_images AS pi ON p.ID = pi.image_id
                      GROUP BY p.ID  ORDER BY p.ID");
            return $query->result_array();
        }

My Controller:

        public function view($id)
        {
            $query = $this->Property_m->get_all_images();
            $res = $this->db->query($query);
            $count = mysqli_num_rows($res);
            $indicators = '';
            $slides = '';
            $counter = 0;
            while($row=mysqli_fetch_array($res)) {
                $image = $row['image_name'];
                $title = $row['property_name'];
                {
                    if ($counter == 0) {
                        $indicators .= '<li data-target="#slider-property" data-slide-to="' . $counter . '" class="active"></li>;';
                        $slides .= '<div class="item-active"><img src="<?php echo base_url()?>data/images/property_images/' . $image . '" alt="' . $title . '"/></div>';
                    } else {
                        $indicators .= '<li data-target="#slider-property" data-slide-to="' . $counter . '" class="active"></li>;';
                        $slides .= '<div class="item-active"><img src="<?php echo base_url()?>data/images/property_images/' . $image . '" alt="' . $title . '"/></div>';
                    }
                    $counter++;
                }
                    $data['prop'] = $this->Property_m->get_property($id);
                    $data['title'] = 'Properties';
                    $data['content'] = 'property_view';
                    $this->load->view('templates/default/template', $data);
                }
            }

and finally my view

     <div id="slider-property" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        <?php echo $indicators; ?>
                                    </ol>
                                    <div class="carousel-inner">
                                        <?php echo $slides; ?>
                                    </div>
                                    <a class="left carousel-control" href="#slider-property" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>
                                    </a>
                                    <a class="right carousel-control" href="#slider-property" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>

When i view this i get a content encoding error, could you please help me sort this out?

  • As i read your code , you need to check your view function. i just modify function for test purpose public function get_all_images(){

        $this->load->model('carsol');   
        $query = $this->carsol->get_all_images();
        $count = count($query);
        $indicators = '';
            $slides = '';
            $counter = 0;       
            foreach($query AS $key => $value){
                     $image = $query[$key]['theme_thumb'];
                     $title = $query[$key]['theme_title'];
    
                     if ($counter == 0) {
                        $indicators .= '<li data-target="#slider-property" data-slide-to="' . $counter . '" class="active"></li>';
                        $slides .= '<div class="item active"><img src="http://localhost/CI2.1.4/images/thumbnail/' . $image . '" alt="' . $title . '"/></div>';
                    } else {
                        $indicators .= '<li data-target="#slider-property" data-slide-to="' . $counter . '"></li>';
                        $slides .= '<div class="item"><img src="http://localhost/CI2.1.4/images/thumbnail/' . $image . '" alt="' . $title . '"/></div>';
                    }
                    $counter=$counter+1;
            } 
             $data['indicators'] = $indicators;
             $data['slides'] = $slides;
             $this->load->view('carsol', $data);    
    

    }

You can compare and see item-active => item active and class="active"

  • I think your view part is ok , but i tested with below code so it's working nicely.

    <html>
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
    }
    </style>
    </head>
    <body>
    <div id="container">

       <div id="slider-property" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
          <?php echo $indicators; ?>
    </ol>
    
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
           <?php echo $slides; ?>
     </div>
    
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#slider-property" 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="#slider-property" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    

    </div>
    </div>
    </div>
    </body>
    </html>

In controller function item-active => item active , class active will only come if condition ==0. Hope this helps you