Question

我已经尝试按照以下链接但无济于事，它仍然以某种方式不会滑动。

Trying to add carousel to webpage without redirecting

我也尝试过更新我的jQuery。

这是我一直在做的事情。

  <!-- Carousel -->
<script>
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 3000
    })
  });    
</script>  


<div style="width:60%;
            margin-left:20%;
            margin-right:20%;

">

<h1>Welcome to the GlassEngine Company Homepage</h1>

</div>

<div style="width:60%;
            margin-left:45%;
            margin-right:20%;

">
<h3>Enjoy your stay!</h3>


</div>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" align="center">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="<?php echo base_url() ?>/images/fslide01.jpg" alt="...">
      <div class="carousel-caption">
      <h3>Leaves</h3>
      </div>
    </div>
    <div class="item">
      <img src="<?php echo base_url() ?>/images/fslide02.jpg" alt="...">
      <div class="carousel-caption">
      Awesome Statue
      </div>
    </div>

    <div class="item">
      <img src="<?php echo base_url() ?>/images/fslide03.jpg" alt="...">
      <div class="carousel-caption">
      Horse
      </div>
    </div>
    <div class="item">
      <img src="<?php echo base_url() ?>/images/fslide04.jpg" alt="...">
      <div class="carousel-caption">
      Scenery
      </div>
    </div>
    <div class="item">
      <img src="<?php echo base_url() ?>/images/fslide05.jpg" alt="...">
      <div class="carousel-caption">
      Animals
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我的<head>代码

中也有以下代码

<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap-theme.min.css">

我也尝试在/之后删除echo，但仍然没有区别。

<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>js/jquery-2.1.4.min.js"> </script>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap-theme.min.css">

Answer 1

所以事实证明我在jquery之前加载了bootstrap。所以正确的代码是这样的：

<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script>
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script>

案件结案。

Carousel Slider重定向到#carousel-example-generic

1 个答案: