Search code examples
javascriptjquerycsscenteringslick.js

SlickJS carousel centerMode not working

I'm trying to center a couple of images in a carousel with slickJS, however it is not properly centering the images due to the left offset being wrong. Anyway to fix this? Any recommendations of a JavaScript carousal that actually does the job? I pulled the code directly from the slick website and it doesn't work.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="/app/source/slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="/app/source/slick/slick-theme.css"/>
        <style>

        </style>
    </head>
    <body>

            <div class="center">
                <div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
                <div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
                <div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
                <div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
                <div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
                <div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
            </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="/app/source/slick/slick.min.js"></script>

        <script type="text/javascript">
            //straight from the website
            $(document).ready(function(){
              $('.center').slick({
                    centerMode: true,
                    centerPadding: '60px',
                    slidesToShow: 3,
                    responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                        arrows: false,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                        arrows: false,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 1
                        }
                    }
                    ]

              });
            });

        </script>
    </body>
</html>

Result:

wrong center aligning

As you can see it is not aligning to the center properly and you can even see alittle of the 4th slide even though it is set to show only 3 slides. Any help is greatly appreciated!

Solution

  • The reason you are seeing the partial views of the edge images is because you have centerMode enabled in your setting, either remove it or set it to false to get rid of that edge view. Additionally, its not that the divs are taking up unequal widths, its that the images inside them are floating to the left, so it looks like there is extra space to the right, after the last image. To fix this just center the image withing its parent div using margin:auto.

    $(document).ready(function() {
  $('.center').slick({
    //centerMode: true,
    //centerPadding: '160px',
    slidesToShow: 3,
    responsive: [{
        breakpoint: 768,
        settings: {
          arrows: false,
          //centerMode: true,
          //centerPadding: '140px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          //centerMode: true,
          //centerPadding: '40px',
          slidesToShow: 2
        }
      }
    ]

  });
});
    img{
  margin:auto;
}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<div class="center">
  <div><img src="http://loremflickr.com/320/240?1" alt="pocky"></div>
  <div><img src="http://loremflickr.com/320/240?2" alt="shrimp"></div>
  <div><img src="http://loremflickr.com/320/240?3" alt="pocky"></div>
  <div><img src="http://loremflickr.com/320/240?3" alt="shrimp"></div>
  <div><img src="http://loremflickr.com/320/240?4" alt="pocky"></div>
  <div><img src="http://loremflickr.com/320/240?5" alt="shrimp"></div>
</div>