javascript - 滑动滑块箭头位于顶部和底部，而不是中心

问题描述

我的箭头在顶部和底部，而不是在中心。可以做些什么呢？

html

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</head>

<body>
    <div class="slider">

        <div class="slider__item">
            <img src="pct1" alt="">
        </div>
        <div class="slider__item">
            <img src="pct1" alt="">
        </div>
        <div class="slider__item">
            <img src="pct1" alt="">
        </div>
        <div class="slider__item">
            <img src="pct1" alt="">
        </div>
        <div class="slider__item">
            <img src="pct1" alt="">
        </div>
        <div class="slider__item">
            <img src="pct1" alt="">
        </div>

    </div>

    
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
        crossorigin="anonymous"></script>

</body>

</html>

$('.slider').slick({
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 3,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });

css

.slick-slide>div {
        transform: scale(.5);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    }

    .slick-center>div {
        transform: scale(1);
    }

    .slider__item>img {
        width: 100%;
        height: auto;
    }

标签： javascripthtmlslick.js

javascript - 滑动滑块箭头位于顶部和底部，而不是中心

问题描述

解决方案

推荐阅读