How can I make my Slick slider less jerky and work at all widths?

Question

I've been working on a cards slider using 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).

If anyone could help me that would be great, I've got a demo up on 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 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. You compensated by adding !important to your card css width.

Rather than fighting with Slick, use its functionality to get the widths you want. Set your slider width to N times the width plus margin of your cards, where N is the slidesToShow setting. Center it in your parent element using 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 .

#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. On very wide screens where there's only 5 cards you may sometimes see a blank space at the end. 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.

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

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

How can I make my Slick slider less jerky and work at all widths?

Question

1 answers

solution1
1 ACCPTED 2017-07-11 20:56:17

How can I make my Slick slider less jerky and work at all widths?

Question

1 answers

solution1 1 ACCPTED 2017-07-11 20:56:17

solution1
1 ACCPTED 2017-07-11 20:56:17