【发布时间】：2017-04-23 16:20:30
【问题描述】：
我在 vue webapp 中使用 carousel 或 bootstrap v4。我在sample example 中使用它，但它在我的本地不起作用，也没有给出任何错误。
<div class="col-xs-5 card prod-img">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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" role="listbox">
<div class="carousel-item active">
<img src="../../assets/animals/rat.png" alt="First slide">
</div>
<div class="carousel-item">
<img src="../../assets/animals/cat.png" alt="Second slide">
</div>
<div class="carousel-item">
<img src="../../assets/animals/dog.png" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" 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="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
我正在使用带有 Vue-router 的 Vue，但是当我在 jsfiddle 中尝试它时效果很好：here 带有 vue-router 和 here 不带有路由器。
我的 index.html 中已经有jquery 和系绳以及引导程序，如下所示：
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/89588fe8fc.js"></script>
<script href="/static/bootstrap.js"></script>
请帮助我的本地设置中可能出现什么错误，我应该提供哪些其他详细信息有助于理解这个问题。
控制台中没有错误。
我在图像上也看到了左右箭头，如下所示，但是当我点击它们时没有任何反应，但是 URL 从 http://localhost:8080/myUrl 更改为 http://localhost:8080/myUrl#carousel-example-generic
这是我的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Hey</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> -->
<script src="https://use.fontawesome.com/89588fe8fc.js"></script>
<script href="/static/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jssor-slider/21.1.5/jssor.slider.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
我已经把我的整个代码here，可以在本地克隆和测试。
【问题讨论】：
-
boostrap js 路径是否正确 /static/bootstrap.js?
-
是的，没错，我可以使用其他功能，比如卡片等。
-
控制台出现什么错误？
-
@vel：我已经更新了问题，控制台上没有错误。我看到左/右箭头，但除了 URL 发生变化之外什么都没有发生。
-
你在哪里放置脚本标签？在
<head>内部或</body>之前？
标签： javascript css twitter-bootstrap carousel vue.js