SlickJS 轮播 centerMode 不工作

Question

我正在尝试使用 slickJS 将轮播中的几张图片居中，但是由于左偏移量错误，它无法正确地将图片居中。有任何解决这个问题的方法吗？任何关于 JavaScript 实际完成工作的狂欢的建议？我直接从 slick 网站上提取了代码，但它不起作用。

<!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>

结果：

如您所见，它没有正确对齐中心，您甚至可以看到第 4 张幻灯片的一小部分，即使它设置为仅显示 3 张幻灯片。非常感谢任何帮助！

Answer 1

您看到边缘图像的部分视图的原因是因为您在设置中启用了 centerMode，请将其删除或将其设置为 false 以摆脱该边缘视图.此外，并不是 div 占用的宽度不相等，而是其中的图像向左浮动，因此看起来在最后一张图像之后右侧还有额外的 space .要解决此问题，只需使用 margin:auto.

将图像与其父 div 居中

$(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>

SlickJS 轮播 centerMode 不工作

SlickJS carousel centerMode not working

javascript

css

jquery

centering

slick.js