我怎样才能让我的 Slick 滑块不那么生涩并在所有宽度下工作？

Question

I've been working on a cards slider using Slick Carousel ( http://kenwheeler.github.io/slick/ ).我一直在使用 Slick Carousel ( http://kenwheeler.github.io/slick/ ) 制作卡片滑块。 I want it to loop infinitely and work at varying browser widths without the cards stacking, it's not quite there at the moment.我希望它无限循环并在不同的浏览器宽度下工作而不会堆叠卡片，目前还没有。 At the moment it's jerky on the loop (after 5 slides).目前它在循环中生涩（5次幻灯片后）。

If anyone could help me that would be great, I've got a demo up on CodePen!如果有人可以帮助我那就太好了，我在 CodePen 上有一个演示！ https://codepen.io/cbg/pen/YQdqPQ 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 wants to resize your boxes since it calculates all measurements (such as movement distance) off of the available space and the number of cards you want to show. Slick 想要调整盒子的大小，因为它会根据可用空间和要显示的卡片数量计算所有测量值（例如移动距离）。 You compensated by adding !important to your card css width.您通过将!important添加到您的卡片 css 宽度来进行补偿。

Rather than fighting with Slick, use its functionality to get the widths you want.与其与 Slick 对抗，不如使用它的功能来获得您想要的宽度。 Set your slider width to N times the width plus margin of your cards, where N is the slidesToShow setting.将滑块宽度设置为卡片宽度加边距的 N 倍，其中 N 是slidesToShow设置。 Center it in your parent element using margin auto:使用 margin auto 将其居中在您的父元素中：

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

Then adjust for smaller browser window widths by wrapping it in a container with a max-width:100% and an overflow:hidden .然后通过将其包装在具有max-width:100%和overflow:hidden的容器中来调整较小的浏览器窗口宽度。

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

This works most of the time.这在大多数情况下都有效。 Slick creates the infinite loop by cloning your cards so that there's two sets, and then occasionally moving them to the other end of your slider to appear to be an infinite line of cards. Slick 通过克隆您的卡片来创建无限循环，以便有两组，然后偶尔将它们移动到滑块的另一端，使其看起来像是无限排的卡片。 On very wide screens where there's only 5 cards you may sometimes see a blank space at the end.在只有 5 张卡片的非常宽的屏幕上，您有时可能会在末尾看到一个空白区域。 In my pen, I copied your cards, so when Slick clones there will be 20 total, then increased slidesToShow to 9 and upped the width of #slider appropriately.在我的笔，我复制你的卡，所以当油滑克隆会有20总，然后增加slidesToShow至9调升的宽度#slider适当。

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

If you want to ensure that a card is always centered, you can adjust your #slider position inside the #container and set centerMode to true如果要确保卡片始终居中，可以在#container调整#slider位置并将centerMode设置为true

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

我怎样才能让我的 Slick 滑块不那么生涩并在所有宽度下工作？

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-07-11 20:56:17

我怎样才能让我的 Slick 滑块不那么生涩并在所有宽度下工作？

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-07-11 20:56:17

解决方案1
1 已采纳 2017-07-11 20:56:17