Question

我试图将一些图像放在带有slickJS的旋转木马中，但是由于左偏移是错误的，它没有正确对中图像。有任何解决这个问题的方法吗？实际完成这项工作的JavaScript carousal的任何建议？我直接从光滑的网站上提取代码，但它不起作用。

<!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占据不等宽度，而是它们内部的图像向左浮动，所以看起来在最后一个图像之后右边有额外的空间。要解决此问题，只需使用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>

SlickJS轮播中心模式无法正常工作

1 个答案: