我正在尝试从单独的html文件中调用bootstrap carousel滑块,但它不起作用。仅显示第一张图像而其他图像不会滑动。轮播滑块位于名为home.html
的文件中:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/insole_01.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_02.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_03.jpg" alt="Flower">
</div>
<div class="item">
<img src="images/insole_04.jpg" alt="Flower">
</div>
</div>
</div>
我在我的index.html
文件中使用div标签调用它:
<div class="products"></div>
这是轮播的Javascript代码:
$('.carousel').carousel({
interval: 3500
});
$(document).ready(function() {
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e){
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
请帮忙!
答案 0 :(得分:0)
由于您使用的是jQuery load()
,因此应使用Callback Function
,仅在加载html后运行代码。
(同时确保您的路径正确)
在此处阅读更多内容:http://api.jquery.com/load/
$(document).ready(function() {
$("div.products").load("products/home.html", function() {
$('.carousel').carousel({
interval: 500
});
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e) {
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
});
$(document).ready(function() {
$("div.products").load("products/home.html", function() {
$('.carousel').carousel({
interval: 500
});
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e) {
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/insole_01.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_02.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_03.jpg" alt="Flower">
</div>
<div class="item">
<img src="images/insole_04.jpg" alt="Flower">
</div>
</div>
</div>
<div class="products">
</div>
&#13;