2
Contributors
2
Replies
33
Views
1 Year
Discussion Span
Last Post by mangel.murti
0
  • 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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.