Multi Item Slider in Codeigniter using JQuery

-

Multi Item Slider in Codeigniter using JQuery 


Database Queries :

CREATE DATABASE IF NOT EXISTS `slider` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `slider`;

CREATE TABLE `slider` (
  `s_id` int(11) NOT NULL,
  `s_title` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `slider` (`s_id`, `s_title`) VALUES
(1, 'Rose'),
(2, 'Tulips'),
(3, 'Lotus');

ALTER TABLE `slider`
  ADD PRIMARY KEY (`s_id`);

ALTER TABLE `slider`
  MODIFY `s_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;

Database.php


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'slider',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);


Config.php

Add this:

$config['base_url'] = 'http://localhost/multislider/';

Welcome.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('Slider_model');
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$this->load->library("pagination");
$this->load->helper('security');
    }
public function index()
{
$data['title'] = 'Multi Item Slider';
$data['description'] = ''Multi Item Slider in Codeigniter using JQuery';
$data['slider'] = $this->Slider_model->getslider();
$this->load->view('welcome_message', $data);
}
}

Slider_model.php

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Slider_model extends CI_Model
{
    function getslider()
{
return $this->db->select('*')
->from('slider')
->get()->result();
}
}


welcome_message.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.simage{
    height: 230px;
    width: 325px;
}
.img .simage{
    display: block;
    margin: 10px;
    padding: 10px;
}
</style>
</head>
<body>

<div id="container">
  <div class="col-md-12 col-xs-12 col-sm-12 widget-border">
<h1>Multi Item Slider</h1>
           <div id="carousel-1" class="carousel slide slide-carousel" data-type="multi" data-ride="carousel">
                 <!-- Indicators -->
                    <ol class="carousel-indicators" style="display:none">
                           <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                           <li data-target="#carousel-1" data-slide-to="1"></li>
                    </ol>
                 <!-- Wrapper for slides -->
                     <div class="carousel-inner">
                        <?php $cnt=0; foreach ($slider as $l_row):$cnt+=1;?>
                              <div class="item <?php if($cnt==1) {echo 'active'; }?>">
                                   <div class="col-md-3 col-sm-6 col-xs-12">
                                       <div class="img">
                                    <img class="simage" alt="<?php echo $l_row->s_title; ?>" src="<?php echo base_url(); ?>template/images/slider_<?php echo $l_row->s_id; ?>_1.jpg">
                                         </div>
                       <h3 class="post-title text-center">  <?php echo $l_row->s_title; ?></h3>
                                  </div>
                             </div>   
                          <?php endforeach; ?>
                     </div>
                </div>                    
            <div class="clearfix"></div>     
  </div>
<script>
jQuery(document).ready(function() {        
jQuery('.carousel[data-type="multi"] .item').each(function(){
var next = jQuery(this).next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
  
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});        
});
</script>  
</body>
</html>


Comments

  1. Ankita Kumari13 May 2020 at 07:02

    Thank you for writing this informative post. Looking forward to read more.
    Best Web Development Company

    ReplyDelete
  2. Wikisol Web Design & SEO Company5 June 2020 at 19:40

    Very Informative Blog. Really an interesting and amazing post. Thanks for sharing this wonderful informative article here
    website Designing Services in Islamabad

    ReplyDelete
  3. Jackrichard16 June 2020 at 14:31

    Many thanks for the exciting blog posting! Simply put your blog post to my favorite blog list and will look forward for additional updates. Simply wanted to write down a word in order to say thanks to you for those wonderful tips.Bluehost Review

    ReplyDelete
  4. ramshad ramsha23 June 2020 at 04:18

    I am very ecstatic when I am reading this blog post because it is written in a good manner and the writing topic for the blog is excellent. Thanks for sharing valuable information.
    Web Design and Development Bangalore | Web Design And Development Company In Bangalore | Web Design And Development Company Bangalore | Web Development Company Bangalore | Website Development Company In Bangalore

    ReplyDelete
  5. BrianIngram4 September 2020 at 05:17

    Interesting Article. Hoping that you will continue posting an article having a useful information. Hire game developer

    ReplyDelete
  6. Orion InfoSolutions 22 September 2020 at 04:26

    This comment has been removed by the author.

    ReplyDelete
  7. Meeraki CS | Web Development | Mobile App Development | Digital Marketing Services20 November 2020 at 09:12

    Nice Blog....

    Looking affordable web development services in USA? Visit once - https://meerakics.com/ or Contact us - +91 7018300334

    ReplyDelete
  8. Anonymous3 December 2020 at 22:49

    Imcrinox is the best mobile app development and web development company in India
    Top Mobile App Development Companies in Bangalore
    Best Web Design Company

    ReplyDelete
  9. Kito Infocom11 November 2021 at 06:12

    Thanks for Sharing Great post

    Buy Plants Online in India
    Buy Seeds Online in India
    Buy Handicrafts Online
    Buy Plant Care Products
    Buy Home Decor Items Online India
    Buy Planter Pot & Flower Stands
    Buy
    Succulents & Cactus

    ReplyDelete
  10. Cre8tivebot6 December 2021 at 01:19

    Good Job! I will refer the people to the best IT Solutions providers click the below link:

    IT Consulting Melbourne
    affordable seo packages
    ppc company australia
    content marketing agency melbourne
    social media marketing company
    web development australia
    app development melbourne
    seo packages
    social media marketing packages
    Cre8tivebot

    ReplyDelete
  11. Cre8tivebot6 December 2021 at 01:49

    Good Job! You have Shared your well knowledge... I will refer the people to the best IT Solutions providers click the below link:

    it solutions website
    pakistan web developer
    app development in pakistan
    software developers in pakistan
    digital marketing in pakistan
    website maintenance packages
    professional it consulting services
    Cre8tivebot

    ReplyDelete
  12. admin4 July 2023 at 07:27

    Thanks a lot for your interesting article. I have been searching for such message for a very long time. Not all your content is completely clear to me, even though it is definitely interesting and worth reading. Goviralhost Review

    ReplyDelete

Post a Comment

Popular posts from this blog

Profile Form in Codeigniter with Image upload and Validation

-
Image
In this tutorial , we learn how to create user Profile Form in Codeigniter with Image upload , Validation  and insert user data in MySQL database. We will then retrieve the information from the database and display it on the user profile details  page. Follow following steps: 1.  Database Database: `forms` -- -------------------------------------------------------- CREATE TABLE `profile` (   `id` int(11) NOT NULL,   `name` varchar(255) NOT NULL,   `email` varchar(255) NOT NULL,   `mobnum` varchar(255) NOT NULL,   `gender` varchar(255) NOT NULL,   `educ` varchar(255) NOT NULL,   `hobbies` varchar(500) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- - INSERT INTO `profile` (`id`, `name`, `email`, `mobnum`, `gender`, `educ`, `hobbies`) VALUES (1, 'John', 'john@gmail.com', '1111111111', 'Male', 'MBA/MCA', 'Photography, Mountain climbing'), (2, 'Mary', 'mary@gmail...
Read more

Category Filter in Codeigniter

-
Image
Filter Products as per Category using Codeigniter 1.   Database  -- -- Table structure for table `category` -- CREATE TABLE `category` (   `c_id` int(11) NOT NULL,   `c_name` varchar(100) NOT NULL,   `c_status` int(1) NOT NULL DEFAULT '1' ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `category` -- INSERT INTO `category` (`c_id`, `c_name`, `c_status`) VALUES (1, 'JACKET', 1), (2, 'SHIRT', 1), (3, 'DRESS MATERIAL', 1); -- -------------------------------------------------------- -- -- Table structure for table `product` -- CREATE TABLE `product` (   `pid` int(11) NOT NULL,   `c_id` int(11) NOT NULL,   `ptitle` varchar(255) NOT NULL,   `status` int(11) NOT NULL DEFAULT '1' ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `product` -- INSERT INTO `product` (`pid`, `c_id`, `pti...
Read more