How to create carousel slider using jquery and codeigniter?

Most of the websites uses jquery carousel sliders to display their products, Now I will walk through you, How to create carousel slider using jquery and codeigniter. Before creating carousel slider ,If you are interested in creating your own blog or website ,eknowledgetree linked with dreamhost and providing promo code for $47 discount, to avail this offer click below link How to avail $47 discount dreamhost promo code

For this I used mysql database, now create a database table to display the product values
In codeigniter view using carousel slider.

Now I am creating a database table as cardetails in my Test database as below.

CREATE TABLE IF NOT EXISTS `cardetails` (
  `car_id` int(11) NOT NULL AUTO_INCREMENT,
  `Brand_name` varchar(50) NOT NULL,
  `Car_price` varchar(20) NOT NULL,
  `Launch_date` date NOT NULL,
  `image_path` varchar(50) NOT NULL,
  `Description` text NOT NULL,
  PRIMARY KEY (`car_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Now I am going to explain jquery anoslide Plugin features below.

Features

Responsive – Adjusts to any viewport width.
Mixed content.
No CSS required.
Lightweight (< 8 kb uncompressed).
Built on top of jquery.
Integrated image preloader.
Callback functions – on Construct, on Start, on End.
Multiple configurable options.
Lazy load for images.
Automatic rotation.
Easy extend .

Requirements

jQuery 1.9+.

Let‘s move to our codeigniter view to integrate with our website.

<div class="row bg2 pdgt10 pdgr10  mgnb10">
<div class="pdg5 fleft row1 mgn0">
<h4 class="mgn0 fleft pdg0 mgnl10 hd_color"> New Launches</h4>
<span class="fright"> <a class="prev cf_next pointer" data-prev></a>  <a class="next cf_pre pointer" data-next></a>  </span>
</div>
<div class="carousel pdgl10 fleft row1" data-mixed>
<ul class="pdg0 mgnl3 Cgal_ul">
<?php foreach($slider->result() as $row)
{
?>
<li>

<div class="row bg1 pdg10 bdr">
<div> <img class="bdr" src="<?php echo base_url();?>uploads/slider/<?php echo $row->image_path;?>" /></div>
<h4 class="mgnl0"> <?php echo $row->brand_name;?></h4>
<h5 class="gray mgnl0"><?php echo $row->car_price;?></h5>

<div class="spf-car pdgb10">
<a href="<?php echo base_url();?>usersearch/display_new_launches/<?php echo $row->car_id;?>">Read More</a><span>                       </span>
</div>
</div>


</li>
<?php 
}
?>

</ul>

</div></div>
<script src="<?php echo base_url();?>js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.anoslide.js"></script>

<script type="text/javascript">
$('.carousel[data-mixed] ul').anoSlide(
{
items: 3,
speed: 500,
prev: 'a.prev[data-prev]',
next: 'a.next[data-next]',
lazy: true,
delay: 100
});
</script>

In the above view, we are fetching the details from table which is stored in array $slider.
By using foreach loop we can display results in view, and at the end of the view in JavaScript function passing variables to display no of items in the page and added Prev and Next Buttons to the slider .Now let’s check the controller function.

<?php   
if (!defined('BASEPATH')) exit('No direct script access allowed');
?>
<?php
class User extends CI_Controller {
Public $data;
	Public function __construct()
	{
	//Core controller constructor
	parent::__construct();
	$this->load->model('user/user_service');
	$this->load->library('form_validation');
	$this->load->library("pagination");
	
	}
	
	Public function index ()
	{
	
	    
	    $data['slider']=$this->user_service->new_launch_slide_articles();
	    $this->load->view('user/sample',$data);
		
	}
}
?>

Now in the above controller we added model function new_launch_slide_articles();
To fetch the details of slider from database and store in an array $data[‘slider’] and passed into view as shown in the example .
Now create model function as below

<?php
class User_service extends CI_Model
 {
 public function __construct()
	{
		parent:: __construct();
		
	}

//slider of new launches
	public function new_launch_slide_articles()
	{
	      $this->db->select('*');
                  $this->db->from('cardetails');
                  $this->db->order_by('car_id', 'DESC');
	      return  $query = $this->db->get();
     
	}
}
?>

Here is my output..