光滑的旋转木马在幻灯片之间跳跃

Question

编辑：@insaneBugs 解决方案有效（我正在为这个旋转木马使用 slick。

预期的行为是什么？没有跳跃

什么是观察到的行为？跳跃

在自动滑动的过程中，幻灯片跳动了一点，尤其是从最后一张跳到第一张。

如何防止他们在滑梯上跳来跳去？

有些人修复了它：.slick-slider div { transition: none; } 但我仍然希望过渡存在

<body>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">


    <style>
        .carousel-equal-heights .carousel-item>.row {
            height: 100% !important;
        }

        .carousel-equal-heights .responsive-slider .card,
        .carousel-equal-heights .responsive-slider .card-body {
            display: flex !important;
            flex-direction: column !important;
        }

        .carousel-equal-heights .responsive-slider .card-body,
        .carousel-equal-heights .responsive-slider .card-text {
            flex-grow: 1 !important;
        }

    </style>

    <div class="carousel-equal-heights">
        <!--Responsive Slider-->
        <div class="row">
            <div class="col-md-12">
                <div class="responsive-slider">
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 1</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="2">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="#">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 2</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="h#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="3">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 3</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 4</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 5</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 6</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 7</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 8</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 9</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Of Container-->



</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
    $(document).ready(function () {
        //Responsive slider
        $('.responsive-slider').slick({
            dots: true,
            arrows: false,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            autoplay: true,
            autoplaySpeed: 2000, //DELAY BEFORE NEXT SLIDE IN MILISECONDS
            speed: 800,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        let $carouselItems = $('.carousel-equal-heights').find('.col-md-4');

        updateItemsHeight();
        $(window).resize(updateItemsHeight);

        function updateItemsHeight() {
            // remove old value
            $carouselItems.height('auto');

            // calculate new one
            let maxHeight = 0;
            $carouselItems.each(function () {
                maxHeight = Math.max(maxHeight, $(this).outerHeight());
            });

            // set new value
            $carouselItems.each(function () {
                $(this).outerHeight(maxHeight);
            });

            // debug it
            console.log('new items height', maxHeight);
        }
    });
</script>
<style>
    .slick-prev:before {
        content: "<";
        color: red;
        font-size: 30px;
    }

    .slick-next:before {
        content: ">";
        color: red;
        font-size: 30px;
    }

    .col-md-4.slick-slide.slick-active {
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }
</style>

)

问题 2：

我怎样才能得到轮播下方的指示器并使它们看起来像这样： carousel indicators picture

Answer 1

你的风格有问题code.if你把它去掉了，但效果很好

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">



</head>
<body>
    <div class="carousel-equal-heights">
        <!--Responsive Slider-->
        <div class="row">
            <div class="col-md-12">
                <div class="responsive-slider">
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 1</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="2">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="#">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 2</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="h#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="3">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 3</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 4</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 5</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 6</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 7</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 8</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 9</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Of Container-->



</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
    $(document).ready(function () {
        //Responsive slider
        $('.responsive-slider').slick({
            dots: true,
            arrows: false,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            autoplay: true,
            autoplaySpeed: 2000, //DELAY BEFORE NEXT SLIDE IN MILISECONDS
            speed: 800,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        let $carouselItems = $('.carousel-equal-heights').find('.col-md-4');

        updateItemsHeight();
        $(window).resize(updateItemsHeight);

        function updateItemsHeight() {
            // remove old value
            $carouselItems.height('auto');

            // calculate new one
            let maxHeight = 0;
            $carouselItems.each(function () {
                maxHeight = Math.max(maxHeight, $(this).outerHeight());
            });

            // set new value
            $carouselItems.each(function () {
                $(this).outerHeight(maxHeight);
            });

            // debug it
            console.log('new items height', maxHeight);
        }
    });
</script>
</body>
</html>

Answer 2

对于导航设计，将这些样式添加到您的代码中

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<style>
.row{
margin-left:0px;
margin-right:0px;
}
.responsive-slider {
padding:1em 0;
}
.slick-prev{
left:0px;
}
.slick-next{
right:0px;
}
.slick-prev, .slick-next{
    font-size:0;
    top: 35%;
 z-index: 1;
    }
    .slick-prev:before, .slick-next:before{
    color: #104975;
    font-size: 32px;
    opacity: 9;
    }
    .slick-dots li button:before{
     
    font-size: 15px;
  opacity: 9;
    color: #0d4775;
    }
</style>

</head>
<body>
    <div class="carousel-equal-heights">
        <!--Responsive Slider-->
        <div class="row">
            <div class="col-md-12">
                <div class="responsive-slider">
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 1</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="2">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="#">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 2</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="h#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="3">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 3</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 4</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 5</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 6</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 7</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 8</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 9</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Of Container-->



</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
    $(document).ready(function () {
        //Responsive slider
        $('.responsive-slider').slick({
            dots: true,
            arrows: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            autoplay: true,
            autoplaySpeed: 2000, //DELAY BEFORE NEXT SLIDE IN MILISECONDS
            speed: 800,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        let $carouselItems = $('.carousel-equal-heights').find('.col-md-4');

        updateItemsHeight();
        $(window).resize(updateItemsHeight);

        function updateItemsHeight() {
            // remove old value
            $carouselItems.height('auto');

            // calculate new one
            let maxHeight = 0;
            $carouselItems.each(function () {
                maxHeight = Math.max(maxHeight, $(this).outerHeight());
            });

            // set new value
            $carouselItems.each(function () {
                $(this).outerHeight(maxHeight);
            });

            // debug it
            console.log('new items height', maxHeight);
        }
    });
</script>
</body>
</html>

Answer 3

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<style>
.row{
margin-left:0px;
margin-right:0px;
}
.responsive-slider {
padding:1em 0;
}
.slick-prev{
left:42%;
}
.slick-next{
right:42%;
}
.slick-prev, .slick-next{
    font-size:0;
 z-index: 1;
    top: auto !important;
    bottom: -30px;
    }
    .slick-prev:before, .slick-next:before{
    color: #104975;
    font-size: 32px;
    opacity: 9;
    }
    .slick-dots li button:before{
     
    font-size: 15px;
  opacity: 9;
    color: #0d4775;
    }
</style>

</head>
<body>
    <div class="carousel-equal-heights">
        <!--Responsive Slider-->
        <div class="row">
            <div class="col-md-12">
                <div class="responsive-slider">
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 1</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="2">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="#">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 2</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="h#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="3">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 3</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 4</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 5</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 6</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 7</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 8</h4>
                                <p class="card-text">This is a txt for testing</p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
                            <img class="card-img-top"
                                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
                                alt="Card image cap">
                            <div class="card-body d-flex flex-column">
                                <h4 class="card-title">Test 9</h4>
                                <p class="card-text">This is a txt for testing
                                </p>
                                <a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Of Container-->



</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
    $(document).ready(function () {
        //Responsive slider
        $('.responsive-slider').slick({
            dots: true,
            arrows: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            autoplay: true,
            autoplaySpeed: 2000, //DELAY BEFORE NEXT SLIDE IN MILISECONDS
            speed: 800,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        let $carouselItems = $('.carousel-equal-heights').find('.col-md-4');

        updateItemsHeight();
        $(window).resize(updateItemsHeight);

        function updateItemsHeight() {
            // remove old value
            $carouselItems.height('auto');

            // calculate new one
            let maxHeight = 0;
            $carouselItems.each(function () {
                maxHeight = Math.max(maxHeight, $(this).outerHeight());
            });

            // set new value
            $carouselItems.each(function () {
                $(this).outerHeight(maxHeight);
            });

            // debug it
            console.log('new items height', maxHeight);
        }
    });
</script>
</body>
</html>

光滑的旋转木马在幻灯片之间跳跃

Slick carousel jumping in between slide

html

javascript

jquery

slick.js