0
$('#myCarousel').carousel({
interval: 2000
})
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
clearA();
function clearA() {
var x = document.getElementsByClassName("active");
var list = x[0].getElementsByClassName("overlay")[0];
list.style.display = "none";
}/* override position and transform in 3.3.x */
.carousel-inner .item.left.active {
transform: translateX(-33%);
}
.carousel-inner .item.right.active {
transform: translateX(33%);
}
.carousel-inner .item.next {
transform: translateX(33%)
}
.carousel-inner .item.prev {
transform: translateX(-33%)
}
.carousel-inner .item.right,
.carousel-inner .item.left {
transform: translateX(0);
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(27, 26, 29, 0.6);
opacity: 1;
bottom: 0;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
.overlay p {
text-align: center;
color: white;
}
.overlay hr {
width: 20%;
}
.col3 {
float: left;
display: block;
height: 200px;
width: 33.33%;
background-size: cover;
background-repeat: no-repeat;
background-position: center fixed;
}
.col-md-4 {
padding-right: 0px;
padding-left: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item">
<div class="col-md-4 col3" style="background-image: url(img_nature_wide.jpg);">
<a class="overlay" href="#">
<p>Signature</p>
<hr>
<p>text here</p>
</a>
</div>
</div>
<div class="item active">
<div class="col-md-4 col3" style="background-image: url(img_fjords_wide.jpg);">
<a class="overlay" href="#">
<p>Signature</p>
<hr>
<p>ext here</p>
</a>
</div>
</div>
<div class="item">
<div class="col-md-4 col3" style="background-image: url(img_mountains_wide.jpg);">
<a class="overlay" href="#">
<p>Signature</p>
<hr>
<p>text here</p>
</a>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
</html>大家好，我有创造3列问题幻灯片中删除标记时的图像。我已经创建了3列幻灯片。现在，我希望中间的图片只显示图片不显示那里的内容。我上面的脚本请看看并给我解决方案。非常感谢。 enter image description here
