- 我创建了图像的轮播效果，但它似乎有 在它的左端点和右端点的灰色阴影颜色。 我想删除它，但我不知道如何删除它。 在我的 Carousel Slider 的左侧和右侧获得灰色。 如何去除灰色？ 我已经为您提供了一个屏幕截图，您可以轻松浏览。 以下是我的代码。
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-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));
}
}); .multi-item-carousel{
.carousel-inner{
> .item{
transition: ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
// non-related styling:
body{
background: #333;
color: #ddd;
}
h1{
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}<html>
<head>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>Here is the Screen Shot of that :-
最佳答案
您需要更改这两个类:
.carousel-control.left,
.carousel-control.right {
background: transparent;
}
它的默认值为:
background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
更新 两个箭头都使用 Bootstrap 图标，因此您必须更改两个类:
.glyphicon.glyphicon-chevron-left,
.glyphicon.glyphicon-chevron-right {
color: red; //Example
}
这些类是 Bootstrap 标准类，如果你有一个全局样式文件，这将改变这两个类的所有出现，从而改变所有其他箭头的所有颜色。
关于javascript - 在我的 Carousel Slider 的左侧和右侧获得灰色。怎样去除灰色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48868727/