How to make the images slide more smoothly? I'm able to control the speed between each slide with data-interval but how do you control the speed the the actual slide? The docs say:
.carousel-item{ transition: transform 5s ease, opacity .5s ease-out; } should do the trick but it doesn't seem to have any effect.
$(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 5s ease, opacity 1.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 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> </html>.
没有评论:
发表评论