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.
Cara Membuat Carousel Dengan Bootstrap
Untuk membuat carousel dengan bootstrap sendiri standarnya kita harus mempunyai kerangka bootstrap yang sudah kita buat dalam laman html seperti berikut:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img class="d-block w-100" src="..." alt="First slide"></div><div class="carousel-item"><img class="d-block w-100" src="..." alt="Second slide"></div><div class="carousel-item"><img class="d-block w-100" src="..." alt="Third slide"></div></div><a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Sementara untuk menghubungkan dengan Codeigniter 3, dan 4 caranya sebagai berikut:
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.