大家好，我有这段代码，我一直在为我的网站编写代码。我正在尝试实现一个轮播功能，其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子:
<html>
<head>
</head>
<body>
<div id = "myCarousel" class = "carousel slide" data-interval="1000" data-ride="carousel" >
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class = "item-active">
<%= image_tag("slide2.jpg", class: "img-responsive") %>
</div>
<div class = "item">
<%= image_tag("slide1.jpg", class: "img-responsive") %>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class = "icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class = "icon-next"></span>
</a>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
</html>
welcome.js 文件:
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 10000
});
});
对此的任何帮助都会很棒!
最佳答案
您可以将此代码添加到您的 application.js 中文件
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 10000
});
});
或者您可以简单地将选项传递给数据属性:
<div id = "myCarousel" class = "carousel slide" data-interval="1000" data-ride="carousel" >
引用: https://v4-alpha.getbootstrap.com/components/carousel/#via-javascript
希望对您有帮助!
更新
我认为你的 js 路径有一些问题。您确定 Bootstrap 文件的 js 路径吗？
如果您将此代码放入 <head>标记它肯定会起作用:
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
关于javascript - Rails Bootstrap 轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41646035/