Carousel Slider重定向到＃carousel-example-generic [英] Carousel Slider redirects to #carousel-example-generic

问题描述

I've tried following the links below but to no avail, it still somehow doesn't slide.

我也试过更新我的jQuery在这里说。

I've also tried updating my jQuery as said here.

Bootstrap Carousel Slider不工作

这是我一直在做的工作。

Here's what I've been working on.

  <!-- 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 ，但仍然没有区别。

I have also tried removing the / after the echo, but still no different.

<!-- 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">

推荐答案

原来我在jquery之前加载bootstrap。所以正确的代码将是这样：

So it turns out I was loading bootstrap before jquery. So the proper code would be this:

<!-- 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！