codeigniter不起作用的bootstrap轮播滑块？

Question

帮助我让淤泥工作：

这是我的代码视图：

<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滑块不起作用..

帮我制作滑块工作我使用codeigniter v2和phpmyadmin ...

Answer 1

尝试使用forech循环或for循环列出数据库中的所有项目。将您的<img src="">更改为<img src="uploads/slider/<?php echo $slider->image">。 在第一项的Bootstrap 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>