2017-07-13 29 views
-1

幫我做silders工作:帶codeigniter的bootstrap carousel滑塊不起作用?

這是我的代碼視圖:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indic[enter image description here][1]ators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner" role="listbox" > 
     <div class="item-active"> 
     <?=img([ 
       'src'  => 'uploads/slider/' . $slider->image 
      ])?> 
      <div class="carousel-caption"> 
      <h3><?=$slider->name?></h3> 
      <p><?=$slider->description?></p> 
      </div> 
     </div> 

     </div> 

     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 

</div> 

這是我的控制器代碼:

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

class Welcome extends CI_Controller { 
    public function __construct(){ 
     parent::__construct(); 
     //load model -> model products 
     $this->load->model('model_products'); 
     $this->load->model('model_sliders'); 
    } 

    public function index() 
    { 
     $data['products'] = $this->model_products->all(); 
     $data['sliders'] = $this->model_sliders->all(); 
     $this->load->view('welcome_message',$data); 
    } 
} 

這是我的模型:

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

class Model_sliders extends CI_Model { 

    public function all(){ 
     //query semua record di table products 
     $hasil = $this->db->get('sliders'); 
     if($hasil->num_rows() > 0){ 
      return $hasil->result(); 
     } else { 
      return array(); 
     } 
    } 
} 

這樣的結果,但AROW滑塊不會工作。

https://i.stack.imgur.com/VPszJ.png

幫助我,使滑塊的工作,我用笨v2和phpMyAdmin的......

+1

歡迎堆棧交換。你能提供更多關於你在控制檯中看到什麼錯誤的細節嗎?當您在頁面上查看源代碼時,PHP是否會生成您期望的HTML? – Goose

+1

嗨,歡迎來到Stack Overflow,請花點時間通過[歡迎導覽](https://stackoverflow.com/tour)瞭解你在這裏的方式(並獲得你的第一個徽章),閱讀如何創建一個[Minimal,Complete和Verifiable示例](https://stackoverflow.com/help/mcve)並檢查[如何提出好問題](https://stackoverflow.com/help/how-to-ask ),所以你增加了獲得反饋和有用答案的機會。 – DarkCygnus

+0

你的'foreach()'循環在哪裏? –

回答

0

試試這個使用forech循環或循環列出數據庫中的所有項目。將您的<img src="">更改爲<img src="uploads/slider/<?php echo $slider->image">在第一項的引導caurosal滑塊class應該class="item-active"其餘項目具有類class="item"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indic[enter image description here][1]ators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner" role="listbox" > 
     <div class="item-active"> 
     <img src="uploads/slider/<?php echo $slider->image"> 
      <div class="carousel-caption"> 
      <h3><?=$slider->name?></h3> 
      <p><?=$slider->description?></p> 
      </div> 
     </div> 
     <?php foreach($sliders as $slider){?> 
     <div class="item"> 
     <img src="uploads/slider/<?php echo $slider->image"> 
      <div class="carousel-caption"> 
      <h3><?=$slider->name?></h3> 
      <p><?=$slider->description?></p> 
      </div> 
     </div> 
     <?php } ?> 

     </div> 

     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 

</div>