Slick.js 里面的旋转木马 <td>

Question

我对 td 中的 Slick.js 有疑问。它没有以正确的方式显示。您可以在代码笔中看到它的行为，https://codepen.io/chrplatou/pen/JjjVbVq。

我不知道是否可以在 td 中使用 slick，但如果有人知道如何修复它，我们将不胜感激。提前致谢！

它与实际图片的行为方式相同。

<link href="~/Content/slick.css" rel="stylesheet" type="text/css" />
<link href="~/Content/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery.js"></script>

<table>
  <thead>
    <th>Weighing-num</th>
    <th>Lincense</th>
    <th>Client</th>
    <th>Deviation</th>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <td>128374</td>
      <td>HJ73264</td>
      <td>Company</td>
      <td>False -Click the row</td>
    </tr>
    <tr class="hidden-img" style="display: none">
      <td colspan="4">
        <div class="single-item">
          <div>
            <h1>Content1</h1>
          </div>
          <div>
            <p>Content2</p>
          </div>
        </div>
      </td>
    </tr>
    <tr class="hidden-row" style="display: none">
      <td colspan="3">
        <button id="img-btn">Show pictures</button>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>
<script src="~/slick/slick.js"></script>

jQuery:

$(document).ready(function(){
  $(".clickable-row").click(function(){
    $(".hidden-row").toggle();
  })
})

$(document).ready(function(){
  $("#img-btn").click(function() {
    $(".hidden-img").toggle();
  })
})

$(document).ready(function () {
        $('.single-item').slick({
            arrows: true,
            dots: true,
            infinte: true
        });
    });

Answer 1

给旋转木马一个宽度，在你点击 "Show pictures" 按钮之前不要初始化它 - 否则当它是 display: none; 时你正在初始化它并且这将无法正确显示（一个常见的如果你搜索它就会有问题。

此外，您无需继续重写 $(document).ready(function() - 只需将其全部打包即可：

$(document).ready(function() {
  $(".clickable-row").click(function() {
    $(".hidden-row").toggle();
  })

  $("#img-btn").click(function() {
    $(".hidden-img").toggle();

    $(".single-item").slick({
      arrows: true,
      dots: true,
      infinte: true
    })
  })
})

table {
  border: solid 1px;
  width: 500px;
}

.slick-slider {
  width: 500px;
}

<table>
  <thead>
    <th>Weighing-num</th>
    <th>Lincense</th>
    <th>Client</th>
    <th>Deviation</th>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <td>128374</td>
      <td>HJ73264</td>
      <td>Company</td>
      <td>False -Click the row</td>
    </tr>
    <tr class="hidden-img" style="display: none">
      <td colspan="4">
        <div class="single-item">
          <div>
            <h1>Content1</h1>
          </div>
          <div>
            <p>Content2</p>
          </div>
        </div>
      </td>
    </tr>
    <tr class="hidden-row" style="display: none">
      <td colspan="3">
        <button id="img-btn">Show pictures</button>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

Slick.js 里面的旋转木马 <td>

Slick.js carousel inside <td>

html

jquery

slick.js