Bootstrap中的旋转木马不工作

时间:2014-09-29 05:03:03

标签: html twitter-bootstrap carousel

这是我的代码:

<head>
<meta name='viewport' content='width=device-width, initial scale=1'>
<meta name="description" content="">
<meta name='author' content="EvaBozh">
<link rel="icon" href='#'>
<title>Bootstrap 3.2.0</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="font-awesome-4.2.0/font-awesome-4.2.0/css/font-awesome.min.css">
<!-- Custom Styles for this Site -->
<link rel="stylesheet" href="CSS/style.css" />
</head>
<body style="background-image: url('Assets/Images/Background.png')">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">

<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>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="Assets/Images/1.jpg" alt="First">
<div class="carousel-caption">
<h1>Example Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a class='btn btn-lg btn-primary' href='#' role='button'>Button [1]</a></p>
</div>
</div>
<div class="item">
<img src="Assets/Images/2.jpg" alt="Second">
<div class="carousel-caption">
<h1>Example Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a class='btn btn-lg btn-primary' href='#' role='button'>Button [2]</a></p>
</div>
</div>
<div class="item">
<img src="Assets/Images/3.jpg" alt="Third">
<div class="carousel-caption">
<h1>Example Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a class='btn btn-lg btn-primary' href='#' role='button'>Button [3]</a></p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

<script src='//code.jquery.com/jquery-1.11.0.min.js'></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
</body>

一切正常,除了当我点击&#34; glyphicon&#34;时,它应该改变图像。但它不是..有人可以帮助我这个并且可能更改代码吗?因为我无法理解问题所在。我是这样的新人......!

2 个答案:

答案 0 :(得分:2)

Js Fiddle

对控制器进行了更改

 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

href="#"更改为href="#carousel-example-generic"

答案 1 :(得分:0)

如果您使用的是jquery的在线源路径,则此路径不起作用,因此您必须使用此路径。它会对你有用。     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>