Slick.js循环问题

编程问答 2022-07-13

问题描述

我正在尝试调整Slick.js滑块，但是在开始和循环结束时出现问题。我知道所有这些都可以通过调整CSS来实现，并且我已经尝试了几种变体，但是没有运气。例如，我在此处添加了margin-left:45px;和margin-right:45px 

    .slick-center {
        -webkit-transform: scale(1.25);
        -moz-transform: scale(1.25);
        transform: scale(1.25);
        margin-left: 45px;
        margin-right: 45px;
    }

要获得结果，我需要它看起来很完美，但是效果不理想。

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Slick Playground</title>
        <Meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="./slick/slick.css">
        <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
        <style type="text/css">
            html,body {
                margin: 0;
                padding: 0;
            }
    
            * {
                Box-sizing: border-Box;
            }
    
            .slider {
                width: 90%;
                margin: 0px auto;
    
            }
    
            .slick-slide {
                margin: 0px 2px;
            }
    
            .slick-slide img {
                width: 100%;
                opacity: 0.5;
            }
    
            .slick-prev,.slick-next {
                z-index: 10;
                top: 100px;
                background-color: transparent;
            }
    
            .slick-prev {
                left: 10px;
            }
    
            .slick-next {
                right: 10px;
            }
    
    
            .slick-slide {
                transition: all ease-in-out .3s;
                opacity: .2;
            }
    
            .slick-active {
                opacity: .5;
            }
    
            .slick-current {
                opacity: 1;
    
            }
    
            .slick-center {
                -webkit-transform: scale(1.25);
                -moz-transform: scale(1.25);
                transform: scale(1.25);
                margin-left: 45px;
                margin-right: 45px;
            }
    
            .slick-list {
                padding: 45px 60px !important;
                margin-left: 30px !important;
            }
    
            .slick-track {
                display: flex;
                align-items: center;
                flex-wrap: Nowrap;
                justify-content: center;
            }
    
            .slick span {
                display: block;
                background: #3498db;
                color: #fff;
                font-size: 36px;
                height: 100px;
                line-height: 100px;
                position: relative;
                text-align: center;
                /* border: solid 1px rgb(145,195,0); */
                /* make the non-centered slides partially transparent */
                opacity: .5;
            }
    
        </style>
    </head>
    
    <body style="background-color: firebrick">
    
        <section class="center slider">
            <div>
                <img src="http://placehold.it/470x250?text=1">
            </div>
            <div>
                <img src="http://placehold.it/470x250?text=2">
            </div>
            <div>
                <img src="http://placehold.it/470x250?text=3">
            </div>
            <div>
                <img src="http://placehold.it/470x250?text=4">
            </div>
            <div>
                <img src="http://placehold.it/470x250?text=5">
            </div>
            <div>
                <img src="http://placehold.it/470x250?text=6">
            </div>
        </section>
    
        <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
        <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(document).on('ready',function() {
                $(".center").slick({
                    dots: false,infinite: true,centerMode: true,slidesToShow: 5,slidesToScroll: 3
                });
            });
    
        </script>
    
    </body>
    
    </html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjqueryslick.js