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.

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+.
READ  How to Create User login using codeigniter?

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

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.

READ  How to post form data using Angularjs and codeigniter?

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

Here is my output..

slider_demo

Thanks for reading this article.

READ  Dropdown populate using Codeigniter and javascript

One Response

  1. Angelina November 25, 2016

Leave a Reply