Question

我有两个相同的光滑滑块代码。使用相同的代码页。我只是复制它。

但是在一个页面上它的工作得很好而另一个页面根本没有工作。图像只是堆叠。

这里是代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />

<body>
    <div class="container-fluid top-slider">
        <div class="row">
            <div class="center">
                <div><IMG SRC="/images/slider/slider-1.jpeg"></div>
                <div><IMG SRC="/images/slider/slider-2.jpeg"></div>
                <div><IMG SRC="/images/slider/slider-3.jpeg"></div>
                <div><IMG SRC="/images/slider/slider-4.jpeg"></div>
                <div><IMG SRC="/images/slider/slider-5.jpeg"></div>
                <div><IMG SRC="/images/slider/slider-6.jpeg"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.center').slick({
                centerMode: true,
                centerPadding: '30px',
                slidesToShow: 3,
                autoplay: true,
                autoplaySpeed: 4000,
                arrows: true,
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '30px',
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '30px',
                            slidesToShow: 1
                        }
                    }
                ]
            });
        });
    </script>
</body>

我该如何解决这个问题？

两个相同的光滑滑块代码不起作用

0 个答案: