If you want to implement Bootstrap Carousel Thumbnail Slider with Codeigniter read and follow steps, Making a bootstrap carsoul slider for your web application or web site is important feature because it takes less part of the web page and contain more information by adding sliding photo and short description on it.For displaying the images to carousel , you can see in below code part $indicators variable , which is dynamically assign from controller , $slides holds the actual image path , which will store in database table and fetch accordingly. If you are using Codeigiter 4 Version then you can modified or update the code after reading & by doing some little analysis.
If you are in other MVC framwork like Laravel etc, and you want this image slider in laravel , function can be take from any library , controller and then you need to just put or change it in new one MVC. 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>
When a request is made from browser for PhotoGallery controller, index function will call , it will load model , model will revert back carsol image data. $counter will be just for identifying or for placing active class in loop. theme_thumb store path of your image file. Your can change http://localhost/CI2.1.4/ to base_url() so it will configure as per your project url or image url. theme_title will store title of image in database.
Your controller function will goes like below:
class PhotoGallery extends CI_Controller {
public function index(){
$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 use the get_themes model fuction and get category wise images for your sliders. Updating code for Codeigiter 4 Version you can easily replace $this by Carsol. So import model at top of your controller as use App\Models\Carsol; and then initilize your model like $Carsol= model(Carsol::class);. Rememeber that your model also needs to update accordingly. here you can see and read See Example as NewsModel.
$this->load->model('theme');
$data['corporate_themes'] = $this->theme->get_themes($limit=3,$category_id=1,$status='Enable');
$data['app_themes'] = $this->theme->get_themes($limit=3,$category_id=2,$status='Enable');
$data['blog_themes'] = $this->theme->get_themes($limit=3,$category_id=3,$status='Enable');
$data['niche_themes'] = $this->theme->get_themes($limit=3,$category_id=4,$status='Enable');
$data['launching_themes'] = $this->theme->get_themes($limit=3,$category_id=5,$status='Enable');
Theme_themes is a table you can make this table in your database MySql, This model will get all Carousel slider data from your database table and return as an Array. In the query provided below, you'll notice that the category_id is included in the WHERE clause. This is because each slider image is associated with a specific category, such as Corporate Themes, App Themes, Blog Themes, Niche Themes, or Launching Soon. get_all_images will get and fetch all images which is associated with a specific category id. You can also use get_themes function that has parameter as $limit,$category_id,$status and more dynamic for you.
The model function will operate as follows:
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();
}
function get_themes($limit,$category_id,$status){
$this->db->select('tc.category_name,tt.theme_id,tt.theme_name,tt.theme_thumb_details,tt.theme_title,tt.theme_thumb,tt.theme_thumb_slider,tt.theme_price,tt.theme_features,tt.download_link,tt.live_demo_link,tt.status');
$this->db->from('theme_themes tt');
$this->db->join('theme_categories tc','tt.category_id=tc.category_id','INNER');
$this->db->where('tt.category_id',$category_id);
$this->db->where('tt.status',$status);
$this->db->order_by('tt.theme_id','DESC');
if($limit != 0){
$this->db->limit($limit);
}
$query = $this->db->get();
if ($query->num_rows() > 0){
return $query->result();
}else{
return NULL;
}
}
}
Create Database Table
We need a table to store our Carousel Slider Images Or Photo. The theme_themes will store informatin of a carsoul image and theme_categories store all category.
Schema: theme_themes
DROP TABLE IF EXISTS `theme_themes`;
CREATE TABLE IF NOT EXISTS `theme_themes` (
`theme_id` bigint NOT NULL AUTO_INCREMENT,
`category_id` bigint NOT NULL,
`theme_name` varchar(255) NOT NULL,
`theme_title` varchar(255) NOT NULL,
`theme_thumb` varchar(255) NOT NULL,
`theme_thumb_slider` varchar(255) NOT NULL,
`theme_thumb_details` varchar(255) NOT NULL,
`theme_zip` varchar(255) NOT NULL,
`theme_color` varchar(15) DEFAULT NULL,
`free_theme` int NOT NULL,
`theme_version` varchar(20) NOT NULL,
`ischeck_demo_link` int NOT NULL DEFAULT '0',
`meta_keywords` varchar(255) NOT NULL,
`meta_description` text NOT NULL,
`theme_changelog_url` varchar(255) NOT NULL,
`theme_price` varchar(40) NOT NULL,
`theme_features` longtext NOT NULL,
`page_seo_title` varchar(255) DEFAULT NULL,
`download_link` varchar(255) NOT NULL,
`live_demo_link` varchar(255) NOT NULL,
`created_date` datetime NOT NULL,
`modify_date` datetime NOT NULL,
`last_edit_date` datetime NOT NULL,
`ip` varchar(64) NOT NULL,
`status` enum('Enable','Disable') NOT NULL,
`theme_compatible_browsers` varchar(100) DEFAULT NULL,
`theme_supports` varchar(100) DEFAULT NULL,
`feature1_title` varchar(60) DEFAULT
`feature_sidebar_image` varchar(255) DEFAULT NULL,
PRIMARY KEY (`theme_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
COMMIT;
Schema: theme_categories
DROP TABLE IF EXISTS `theme_categories`; CREATE TABLE IF NOT EXISTS `theme_categories` ( `category_id` bigint NOT NULL AUTO_INCREMENT, `category_name` varchar(255) NOT NULL, `category_description` varchar(255) NOT NULL, PRIMARY KEY (`category_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; COMMIT;