Question

用于直接轮播实现的平滑集成无法正常工作。参见下面的代码。

$(function() {
  $(".testimonial").slick();
});

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="testimonial">
  First testimonial
</div>
<div class="testimonial">
  Second testimonial
</div>
<div class="testimonial">
  Third testimonial
</div>

也可以在codesandbox

中使用

Answer 1

您需要链接 Slick 所需的 CSS 和主题文件设置您正在使用的演示。您可以在本地下载文件，然后链接到它，或者更简单地使用 CDN 链接到它们。

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

第二件事是您需要在 Parent元素上启动轮播，而不是在每个项目上启动。

<div class="testimonial">
    <div> First Item </div>
    <div> Second Item </div>
     ... 
    </div> nth Item </div>
</div>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"
    />
    <div class="testimonial">
        <div class="">
            First testimonial
        </div>
        <div class="">
            Second testimonial
        </div>
        <div class="">
            Third testimonial
        </div>
    </div>
    
     <script
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"
    ></script>
    <script
      type="text/javascript"
      src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
    ></script>
    <script src="src/index.js"></script>
    <script>
      $(function() {
        $(".testimonial").slick();
      });
    </script>

无法在演示中集成光滑轮播

1 个答案: