我在常规屏幕上有一个响应式引导轮播,其中包含 3 个元素(一次移动 1 个),但是当您按下上一个按钮时,轮播中的图像看起来像是被抛来抛去。有什么办法可以解决这个问题/我做错了什么吗?我似乎无法在脚本中找到错误。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.carousel[data-type="multi"] .item').each(function(){
var next = jQuery(this).next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
for (var i=0;i<1;i++) {
next=next.next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-control.left, .carousel-control.right {
background-image:none;
}
.img-responsive{
width:100%;
height:100%;
}
@media (min-width: 992px ) {
.carousel-inner .active.left {
left: -33.33333%;
}
.carousel-inner .next {
left: 33.33333%;
}
.carousel-inner .prev {
left: -33.33333%;
}
}
@media (min-width: 768px) and (max-width: 991px ) {
.carousel-inner .active.left {
left: -33.3%;
}
.carousel-inner .next {
left: 33.3%;
}
.carousel-inner .prev {
left: -33.3%;
}
.active > div:first-child {
display:block;
}
.active > div:first-child + div {
display:block;
}
.active > div:last-child {
display:none;
}
}
@media (max-width: 767px) {
.carousel-inner .active.left {
left: -100%;
}
.carousel-inner .next {
left: 100%;
}
.carousel-inner .prev {
left: -100%;
}
.active > div {
display:none;
}
.active > div:first-child {
display:block;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Multiple image sliding demo</h1>
<!--The main div for carousel-->
<div class="container text-center">
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval=false id="fruitscarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.carousel[data-type="multi"] .item').each(function(){
var next = jQuery(this).next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
for (var i=0;i<1;i++) {
next=next.next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-control.left, .carousel-control.right {
background-image:none;
}
.img-responsive{
width:100%;
height:100%;
}
@media (min-width: 992px ) {
.carousel-inner .active.left {
left: -33.33333%;
}
.carousel-inner .next {
left: 33.33333%;
}
.carousel-inner .prev {
left: -33.33333%;
}
}
@media (min-width: 768px) and (max-width: 991px ) {
.carousel-inner .active.left {
left: -33.3%;
}
.carousel-inner .next {
left: 33.3%;
}
.carousel-inner .prev {
left: -33.3%;
}
.active > div:first-child {
display:block;
}
.active > div:first-child + div {
display:block;
}
.active > div:last-child {
display:none;
}
}
@media (max-width: 767px) {
.carousel-inner .active.left {
left: -100%;
}
.carousel-inner .next {
left: 100%;
}
.carousel-inner .prev {
left: -100%;
}
.active > div {
display:none;
}
.active > div:first-child {
display:block;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Multiple image sliding demo</h1>
<!--The main div for carousel-->
<div class="container text-center">
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval=false id="fruitscarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</body>
</html>
最佳答案
它与媒体浏览器窗口屏幕大小有关。在小屏幕尺寸(例如代码片段)中它可以工作,但是当您在更大的窗口尺寸中测试代码时它不起作用。因此,它与以下事实有关:@media (max-width: 767px) 的样式工作正常,但对于 @media 及以上的样式(例如 @media (min-width: 992px )),css 标签不是完全的。乍一看,我注意到没有用于更大屏幕尺寸的 .active 标签。
关于javascript - 以前不使用 Bootstrap Carousel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55229933/