【问题标题】:bootstrap carousel slider with codeigniter not working?带有codeigniter的引导轮播滑块不起作用?
【发布时间】:2017-07-13 15:55:18
【问题描述】:

帮助我使 silders 工作:

这是我的代码视图:

<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();
        }
    }
}

这是结果,但箭头滑块不起作用..

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

【问题讨论】:

  • 欢迎来到 Stack Exchange。您能否提供有关您在控制台中看到的错误的更多详细信息?当您在页面上查看源代码时,PHP 是否生成了您期望的 HTML?
  • 您好,欢迎来到 Stack Overflow,请花点时间通过 welcome tour 了解您在此处的方式(并获得您的第一个徽章),阅读如何创建 Minimal, Complete, and Verifiable example并检查How to Ask Good Questions,这样您就有机会获得反馈和有用的答案。
  • 你的foreach()循环在哪里??

标签: php database codeigniter slider carousel


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-11-27
    • 2015-04-16
    • 1970-01-01
    • 2018-03-29
    • 1970-01-01
    • 2020-10-06
    • 2021-05-14
    • 1970-01-01
    相关资源
    最近更新 更多