如何在同一页面放置两个引导转盘？
我试图在同一页面上使用两个引导程序轮播。以下是代码：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--BOOTSTRAP LINKS FOR CAROUSEL-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--BOOTSTRAP LINKS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!--START OF NAVBAR-->
<div class="nav-box">
<br>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<img src="logo.png" id="logo"></img>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT S</a></li>
</ul>
</div>
</nav>
</div>
<!--END OF NAVBAR-->
<!--START OF BOOTSTRAP CAROUSEL-->
<section class="section-white">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:100%; height: 500px !important;">
<div class="item active">
<img src="a.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="b.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="c.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</section>
<!--END OF BOOTSTRAP CAROUSEL-->
<!--START OF RADIO BAR-->
<div class="radio-bar">
<div class="text1">
<h3 id="text1-line1">streams</h3>
<h4 id="text1-line2">shows</h4>
</div>
<div id="audio">
<audio controls>
<source src="viper.mp3" type="audio/mp3" controls="controls">
</audio>
</div>
<div id="podcast-box">
<img src="icon.png" id="image"></img>
<p id="pheading">casts</p>
</div>
<div id="blue-box">
<img src="blue.svg" id="blue-box-image"></img>
<p id="blue-box-heading">show</p>
</div>
</div>
<!--END OF RADIO BAR-->
<!--START OF ABOUT US BAR-->
<div class="about-us">
<h3 id="heading">ABOUT</h3>
<p id="para">*******</p>
<div class="image-box">
<img src="image.jpg" id="image"></img>
</div>
</div>
<!--END OF ABOUT US BAR-->
<!--START OF VIDEO CAROUSEL-->
<div class="container" id="container">
<div class="row" id="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide" id="carousel">
<ol class="carousel-indicators" id="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active" id="action"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner" id="carousel-inner">
<div class="item active" id="item-active">
<div class="row" id="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="item" id="item">
<div class="row" id="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="item" id="item">
<div class="row" id="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control" id="carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control" id="carousel-control">›</a>
</div>
<!--.Carousel-->
</div>
</div>
</div>
<!--.container-->
<script type="text/javascript">
$(document).ready(function() {
$('#Carousel').carousel({
interval: 5000
})
});
</script>
<!--END OF VIDEO CAROUSEL-->
</body>
</html>
我将类名更改为id，因为它与之前的轮播重叠。即使在这样做之后，第二个旋转木马与它之前的元素重叠，并且没有出现右侧导航箭头。
我查看了以下链接：Is it possible to have multiple Twitter Bootstrap carousels on one page?。
这里说导航href应该指向不同的ID，我已经完成了。但我仍然遇到问题。
我哪里错了？
2 个答案:
答案 0 :(得分：2)
更新3：在这里，您可以确定这是您想要的，您需要将所有代码复制到您自己的服务器，它应该可以工作！ ：）
＆＃13;
＆＃13;
＆＃13;
＆＃13;
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel2').carousel({
interval: 2000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});#myCarousel {
margin-top: 30px;
}
.thumbnail {
border: none;
}
.thumbnails {
display: inline-flex;
width: 100%;
}
.thumbnails-center {
display: flex;
margin: 0 auto;
}
.cursor {
cursor: pointer;
} <link href='test2.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel2">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!--/Slider-->
</div>
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!--/Slider-->
<div class="row hidden-phone" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="thumbnails">
<div class="thumbnails-center">
<a class="thumbnail cursor" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
<a class="thumbnail cursor" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
<a class="thumbnail cursor" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
<a class="thumbnail cursor" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
<a class="thumbnail cursor" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
答案 1 :(得分：2)
上次修改在那里，我将轮播功能添加到第二轮播的缩略图中。 ：）
＆＃13;
＆＃13;
＆＃13;
＆＃13;
jQuery(document).ready(function($) {
$('#myCarousel3').carousel({
interval: 1000000
});
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel2').carousel({
interval: 2000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});#myCarousel {
margin-top: 30px;
}
.thumbnail {
border: none;
}
.thumbnail-modifier {
margin-bottom: 0px;
}
.thumbnails {
display: inline-flex;
width: 100%;
}
.thumbnails-center {
display: flex;
margin: 0 auto;
}
.cursor {
cursor: pointer;
}
.row-fluid {
display: inline-flex;
width: 100%;
}
#myCarousel3 {
margin-top: 20px;
margin-bottom: 50px;
}
.row-center {
display: flex;
margin: 0 auto;
}
.carousel-control-modifier {
background-image: none !important;
color: black !important;
}<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel2">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
<div class="">
<div id="myCarousel3" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="left carousel-control carousel-control-modifier" href="#myCarousel3" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control carousel-control-modifier" href="#myCarousel3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!--/myCarousel-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？