Question

我一直在使用Slick Carousel（http://kenwheeler.github.io/slick/）处理卡片滑块。我希望它能无限循环并在不同的浏览器宽度下工作，而不需要卡片堆叠，目前还不完全存在。目前它在循环中是不稳定的（在5张幻灯片之后）。

如果有人能帮助我，那就太棒了，我已经在CodePen上进行了演示！ https://codepen.io/cbg/pen/YQdqPQ

<head>

    <style type="text/css">

        body {
            margin: 0;
        }

        #slider {
            background-color: #f5f7f9;
            padding: 80px;
            overflow: auto;
        }

        .service {
            width: 260px !important;
            height: 303px;
            background-color: white;
            float: left;
            margin: 0 15px;
            box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15);
            border-radius: 4px;
        }

        .slick-arrow {
            display: none !important;
        }

        .pod1 {
            background-image: url(fakepods/pod1.png);
        }

        .pod2 {
            background-image: url(fakepods/pod2.png);
        }

        .pod3 {
            background-image: url(fakepods/pod3.png);
        }

        .pod4 {
            background-image: url(fakepods/pod4.png);
        }

        .pod5 {
            background-image: url(fakepods/pod5.png);
        }

    </style>

</head>

<body>

    <div id="slider" class="center slider">
        <div class="pod1 service"></div>
        <div class="pod2 service"></div>
        <div class="pod3 service"></div>
        <div class="pod4 service"></div>
        <div class="pod5 service"></div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script src="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: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 250,
    });


    });
    </script>

</body>

Answer 1

Slick希望调整您的盒子大小，因为它会计算可用空间的所有测量值（例如移动距离）和您想要显示的卡片数量。您通过将!important添加到卡的css宽度进行补偿。

不是与Slick战斗，而是使用其功能来获得您想要的宽度。将滑块宽度设置为卡的宽度加上边距的N倍，其中N是slidesToShow设置。使用margin auto：

将其置于父元素中

#slider {
  padding: 80px;
  overflow: visible;
  width:1160px;
  margin:0 auto;
}

然后通过将其包装在具有max-width:100%和overflow:hidden的容器中来调整较小的浏览器窗口宽度。

#container{
  background-color: #f5f7f9;
  overflow:hidden;
  max-width:100%;
  height:100%;
}

这可以最的时间。光滑通过克隆你的卡片来创建无限循环，这样就有两组，然后偶尔将它们移动到滑块的另一端，看起来像是一张无限的牌。在非常宽的屏幕上，只有5张卡片，你有时可能会看到一个空白区域。在我的笔中，我复制了你的卡片，所以当Slick克隆总数为20时，然后将slidesToShow增加到9并适当地增加#slider的宽度。

https://codepen.io/freer4/pen/EXGKXg

如果您想确保卡片始终居中，可以调整#slider内的#container位置，并将centerMode设置为true

https://codepen.io/freer4/pen/WOLwLe

如何让我的Slick滑块不那么生涩并且可以在所有宽度下工作？

1 个答案: