Question

我正在通过示例工作，以使用Slick.js创建产品滑块。我看到了以下示例：https://jsfiddle.net/kirana/b5bqk68j/与我想要的非常接近，除了我将使用中心模式并在其两侧均具有项目而不是将其隐藏。

JS Fiddle代码：

<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

$(".single-item").slick({
    dots: true
});

我的代码如下

$(document).on("ready", function() {
    $(".single-item").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
                }
            }
        ]
    });
});

.container {
    margin: 0 auto;
    padding: 40px;
    width: 80%;
    color: #333;
    background: #419be0;
}

.slick-slide {
    text-align: center;
    color: #419be0;
    background: white;
}

<html>
<header>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"/>
    <style>
        .container {
            margin: 0 auto;
            padding: 40px;
            width: 80%;
            color: #333;
            background: #419be0;
        }

        .slick-slide {
            text-align: center;
            color: #419be0;
            background: white;
        }
    </style>
</header>
<body>
<div class='container'>
    <div class='single-item'>
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
        <div><h3>5</h3></div>
        <div><h3>6</h3></div>
    </div>
</div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
</html>

我期望它会相似，但是我有一个异常大的“滑块区域”，这使我的布局混乱了。这是我正在使用的精简版本。

它应该是这样的：

在这个CSS问题上，我一直在努力。为什么高度会偏斜这么大？

感谢您的帮助！

slick.js加载异常大的滑块

0 个答案: