时间戳

首页 > 解决方案 > SlickJS 不工作仅查看 html

javascript - SlickJS 不工作仅查看 html

问题描述

我正在尝试使用SlickJS创建幻灯片。

我已经按照指南创建了这个幻灯片，但是我没有得到实际的幻灯片，而是得到了一堆 HTML。这是我的工作：

<html>

<head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css" />
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
</head>

<body>

  <div class="your-class">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('.your-class').slick({
        arrows: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      });
    });
  </script>

</body>

</html>

标签： javascripthtmlcss

解决方案

我怀疑这与您的进口有关。我试过使用最新版本的jQueryandslickjs并且似乎在本地工作。请看下面的代码：

<html>

<head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
</head>

<body>
  <div class="your-class">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.your-class').slick({
        arrows: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      });
    });
  </script>
</body>

</html>

推荐阅读