Is there a way to enhance the smoothness of image slides? I can adjust the speed between slides using data-interval, but how do you tweak the speed within each slide? According to the documentation:
.carousel-item{
transition: transform 5s ease, opacity .5s ease-out;
}
This code snippet should work, but it doesn't seem to make any difference.
$(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 2s ease, opacity .5s ease-out;
}<!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 washed 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>
</html>