Question

在下面的代码中有两个.wrapper divs，创建了两个带有slick.js的轮播。在上部旋转木马中有两个图像，在第二个旋转木马中有四个图像。在光滑slidesToShow的初始化中设置为4。

第一个转盘上的两个图像水平居中，但我需要将它们左对齐。如何左转对齐轮播图像？两个转盘的图像尺寸应相同。

代码html头：

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CSS：

.wrapper div {
  padding: 10px;
}
.wrapper img {
  width: 100%;
  height: auto;
}

JS：

$(document).ready(function(){
  $('.wrapper').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
      {
        breakpoint: 1000,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 650,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      },
    ]
  });
});

HTML正文：

<div class="wrapper">
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
</div> 
<div class="wrapper">
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
</div> 

<script type="text/javascript" src="slick/slick.min.js"></script>

我尝试了以下操作，但是我不想因维护原因更改slick.js生成的代码：

.slick-track {
  margin-left: 0;
  margin-right: 0;
}

是否有更合适的方法来对齐图像？

Answer 1

光滑的文档还没有左对齐的选项。所以压倒css类是一种可行的方法。

如果您只想将第一个轮播对齐，请将以下段添加到其中一个自定义覆盖css文件中（在slick.css之后加载任何css文件）

.left-align-slick > .slick-list > .slick-track {    
    margin-left:0;
}

将 left-align-slick 类添加到要左对齐的轮播的容器div中。

<div class="wrapper left-align-slick">
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
</div>

Answer 2

我遇到了同样的问题。我只是用空的滑块容器填充空间。

<?php $count = 0; ?>
<?php foreach ($items as $_item): ?>
    ...
<?php endforeach ?>
<?= fillEmptySpace($count, $slideMinItems); ?>

function fillEmptySpace($count, $slideMinItems)
{
    $emptySliderHtml = "<div class='product-item'></div>";
    $output = "";

    if ($count < $slideMinItems) {

        $difference = $slideMinItems - $count;

        for ($i = 0; $i < $difference; $i++) {
            $output .= $emptySliderHtml;
        }
    }

    return $output;
}

使用比'slidesToShow'

2 个答案: