Bootstrap V4轮播无法正常工作
[英]Bootstrap v4 carousel not working
问题描述
I am using carousel of bootstrap v4 in a vue webapp . 
我在vue webapp中使用bootstrap v4的 轮播 。 I am using as it is in the sample example , but it is not working in my local, neither it is giving any error. 我正在使用示例示例中的 ，但是在我的本地环境中不起作用，也没有给出任何错误。
<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>
I am using Vue with Vue-router, however it works well when I try it in jsfiddle : here with vue-router and here without router. 我正在将Vue与Vue-router一起使用，但是当我在jsfiddle中尝试时，它工作得很好： 这里有vue-router，而这里没有路由器。
I already have jquery and tether in my index.html along with bootstrap as shown following: 我的index.html中已经包含了jquery和tether以及引导程序，如下所示：
<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>
Please help what can be the error in my local setup, what other details should I provide which can be helpful to understand this problem. 请帮助我本地设置中的错误，我应该提供哪些其他详细信息，这些信息可能有助于理解此问题。
There are no errors in the console. 控制台中没有错误。
I see left and right arrows also on the image, as attached below, but nothing happens when I click on those but URL changes to http://localhost:8080/myUrl#carousel-example-generic from http://localhost:8080/myUrl 我看到左，右箭头也是在图像上，如下连接，但是当我点击这些网址，但变化没有反应http://localhost:8080/myUrl#carousel-example-generic从http://localhost:8080/myUrl
Here is my index.html : 这是我的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>
I have put my whole code here , which can be cloned and tested in local. 我把整个代码放在这里 ，可以在本地克隆和测试它们。
2 个解决方案
解决方案1
5 已采纳 2016-12-09 06:01:41
updated 更新
<!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'>
<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>
<link rel="stylesheet" href="static/bootstrap.css" type="text/css">
<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>
change these lines 更改这些行
<link rel="stylesheet" href="static/bootstrap.css" type="text/css">
<script href="static/bootstrap.js"></script>
Instead of 代替
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script href="/static/bootstrap.js"></script>
解决方案2
2 2016-12-14 03:42:10
The error is here. 错误在这里。
<script href="/static/bootstrap.js"></script>
HREF, should be SRC, and all works fine :). HREF，应为SRC，并且一切正常:)。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.