图像左对齐，图像少于'slidesToShow'

Question

在下面的代码中有两个.wrapper divs，创建两个带有光滑.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
        }
      },
    ]
  });
});

正文：

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

我

尝试了以下方法，它有效，但出于维护原因，我不想更改光滑.js生成的代码：

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

有没有更合适的方法来左对齐图像？

Answer 1

光滑的文档还没有左对齐的选项。因此，覆盖 css 类是一种方法。

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

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

将左对齐光滑

类添加到要左对齐的轮播的容器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;
}