如何解决bootstrap carousel-item 过渡需要 !important to work
我能够让它工作，但必须将 !important 添加到 .carousel-item 转换中。有没有另一种方法来指定过渡，所以我不需要使用 !important？
我知道我可以添加另一个类，如 .slow，然后使用 .carousel-item.slow，但想知道是否有引导类或不同的方式来做到这一点。文档说：
更改过渡持续时间 .carousel-item 的转换持续时间可以在编译之前使用 $carousel-transition Sass 变量进行更改，或者如果您使用的是已编译的 CSS，则可以自定义样式。如果应用了多个转换，请确保首先定义转换转换（例如转换：转换 2 秒缓动，不透明度 0.5 秒缓出）。但是在没有 !important 的情况下应用时似乎不起作用。
$(document).ready(function() {
$('.carousel').on('click',function() {
if (!$(this).hasClass('paused')) {
$('.carousel').carousel('pause');
$('.carousel').toggleClass('paused');
$('.carousel-caption').css("color","lightgrey");
$(".carousel-item").css("filter","blur(2px)");
} else {
$('.carousel').carousel('cycle');
$('.carousel').toggleClass('paused');
$('.carousel-caption').css("color","white");
$(".carousel-item").css("filter","blur()");
}
});
});html,body{
height:100%;
}
#cover{
background: #222 url('img/stars.jpg')center center no-repeat;
background-size:cover;
color:white;
height:100%;
text-align:center;
display:flex;
align-items:center;
}
#cover-caption{
width:100%;
}
.form-inline{
justify-content:center;
}
.carousel-item {
transition:transform 5000ms linear!important;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<Meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvcwpIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnjsK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<section id="carousel">
<div id="carousel-home" class="carousel slide col-6 mx-auto" data-ride="carousel" data-interval="3500">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="active"></li>
<li data-target="#carousel-home" data-slide-to="1"></li>
<li data-target="#carousel-home" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/150" alt="taking a picture">
<div class="carousel-caption d-none d-md-block">
<h5>A woman with a camera</h5>
<p>She is probably taking a picture</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/150" alt="spiders with rain">
<div class="carousel-caption d-none d-md-block">
<h5>Down came the rain</h5>
<p>and wshed the spider out</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/150" alt="my heart">
<div class="carousel-caption d-none d-md-block">
<h5>Making love</h5>
<p>with their hands...</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
