时间戳

首页 > 解决方案 > Slick.js 循环问题

javascript - Slick.js 循环问题

问题描述

我正在尝试调整 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>

标签： javascriptjqueryslick.js

解决方案

推荐阅读