javascript - 如何更改引导程序 4 中的过渡持续时间速度

问题描述

如何让图片滑动更流畅？我可以使用数据间隔控制每张幻灯片之间的速度，但是您如何控制实际幻灯片的速度？文档说：

.carousel-item{
    transition: transform 5s ease, opacity .5s ease-out;
}

应该可以解决问题，但似乎没有任何效果。

$(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 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>

标签： javascriptjquerycssbootstrap-4

javascript - 如何更改引导程序 4 中的过渡持续时间速度

问题描述

解决方案

推荐阅读