You may also see the post here http://yourlearn.in/posts/view/1/bootstrap-carousel-thumbnail-slider and know and read much more about it.
If you want to implement Bootstrap Carousel Thumbnail Slider with Codeigniter, follow the steps
1.Your html file or you can say your view file will goes like below.
<!DOCTYPE html>
<html lang="en">
<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>
2. Your controller function will goes like below
class Welcome extends CI_Controller {
public function index(){
}
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);
}
}
3. Your model function will goes like below
class Carsol extends CI_Model {
function __construct() {
// Call the Model constructor
parent::__construct();
$this->load->database();
}
function get_all_images(){
$query = $this->db->query("SELECT * FROM theme_themes where category_id =3 limit 4");
return $query->result_array();
}
}
No comments:
Post a Comment
If you have any doubt let me know