Cara Membuat Bootstrap 4 Slider Carousel di Codeigniter

Cara Membuat Bootstrap 4 Slider Carousel di Codeigniter

Membuat Slider Bootstrap 4 atau sering disebut Slider Carousel memang kadang membingungkan khususnya jika sudah terhubung menggunakan database query alias dynamic slider php.

Nah, kali ini saya akan berikan sedikit scrip bagaimana membuat Slider Bootstrap dan berikut sedikit tip script sederhana yang bisa sobat gunakan semoga bisa membantu.

Controller

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

class EventsFrontend extends APP_Controller {
    var $template = array();
   
    public function __construct()
    {
        parent::__construct();

        $this->template['module']    = 'events';
           
        $this->load->model('eventsfrontend_model','events');
    }

    /**
     * Callback functions index
     *
     * return invent index
     */
    public function index(){       
        redirect('/');
    }

    /**
     * Callback functions for detail
     *
     * @return array json
     *
     */
    public function detail($eventId=null,$eventSlug=null){
        if(is_null($eventId)){
            redirect('/');
        }
       
        $event_info = $this->events->get_event_info($eventId);
        if($event_info){
            $this->template['title']=$event_info['post_title'];
           
            $this->template['event_info']=$event_info;
           
            $this->load->view("../../modules/".$this->template['module']."/views/frontend/detail", $this->template);
        }else{
            $this->load->view("../../modules/".$this->template['module']."/views/frontend/404", $this->template);
        }
    }

}

Model Query

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

class EventsFrontend_model extends CI_Model {   
    function __construct()
    {
        parent::__construct();
    }

    public function get_event_info($data=null){
        if (is_array($data))
        {
            foreach ($data as $key => $value)
            {
                $this->db->where($key, $value);
            }
        }
        else
        {
            $this->db->where('ID', $data);
        }
       
        $this->db->select('.');
        $this->db->from('posts as');
        $query = $this->db->get();
        if ( $query->num_rows() > 0 ){
            $row = $query->row_array();
           
            $this->db->where('posts_id',$row['ID']);
            $this->db->select('*');
            $this->db->from('posts_to_speakers as a');
            $q = $this->db->get();
            if($q->num_rows()>0){
                $speaker=array();
                foreach($q->result_array() as $r){
                    $speaker[]=$r;
                }
                $row['speaker']=$speaker;
            }           
           
            return $row;
        }else{
            return false;
        }
    }

}

View

<section id="speaker" class="speaker gray-section bganimated fadeInRight pb-5">
    <div class="container">
        <div class="row mb-3">
            <div class="col-lg-12 text-center">
                <div class="navy-line"></div>
                <h2>Speaker</h2>
                <p>Following is the list of speaker for <strong><?php echo $event_info['post_title']; ?></strong> event.</p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="speakerCarousel" class="carousel slide pb-0 mb-0" data-ride="carousel" style="border:1px solid red;height:100% !important;">
                    <div class="carousel-inner pb-0 mb-0" style="border:1px solid yellow;">
                    <?php $i=0; $no=0; $count = count($event_info['speaker']);?>
                    <?php foreach($event_info['speaker'] as $r){ ?>
                    <?php if($i==0){ ?>
                    <div class="carousel-item py-5 <?php echo ($no==0)? 'active' : ''; ?>">
                    <div class="row">
                    <?php } ?>                   
                    <div class="col-sm-4 wow fadeInLeft">
                        <div class="team-member">
                            <?php if(@getimagesize(base_url('storages/image/'.$r['image']))){ ?>
                            <img src="<?php echo base_url('storages/image/'.$r['image']); ?>" alt="<?php echo $r['first_name']; ?>" class="img-fluid rounded-circle img-small" style="width:50%;">
                            <?php }else{ ?>
                            <img src="<?php echo base_url('assets/img/empty-'.$r['gender'].'.png'); ?>" alt="<?php echo $r['first_name']; ?>" class="img-fluid rounded-circle img-medium" style="width:50%;">
                            <?php } ?>
                           
                            <h4><?php echo ($r['degree'])? $r['degree'].' ' : ''; ?><?php echo $r['first_name']; ?><?php echo ($r['last_name'])? ' '.$r['last_name'] : ''; ?><?php echo ($r['back_degree'])? ' '.$r['back_degree'] : ''; ?></h4>
                        </div>
                    </div>
                    <?php if($i==2){ ?>
                    </div> <!-- end row -->
                    </div><!-- end item -->               
                    <?php $i=0; ?>
                    <?php }else{ ?>
                    <?php if($no==$count-1){ ?>
                    </div> <!-- end 2 row -->
                    </div><!-- end 2 item -->                   
                    <?php } ?>               
                    <?php $i++; ?>
                    <?php } ?>
                   
                    <?php $no++; ?>
                    <?php } ?>                   
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Untuk menjalankan silahkan jalankan dengan memanggil http://localhost/contoh

Jika ada pertanyaan silahkan kirim melalui komentar dibawah, saya akan bantu untuk solve jika saya bisa. Jangan lupa untuk share like atau subscribe youtube channel kami untuk mendapatkan update.