时间戳

首页 > 解决方案 > 本地运行光滑滑块失败

jquery - 本地运行光滑滑块失败

问题描述

我正在使用slick滑块插件，实现在jsfiddle上工作的最基本示例，但一旦我在本地运行 slick 滑块就不起作用。

似乎一旦我在本地运行它，如果我在 jsfiddle 中运行它，我就无法获得结果，但我不知道是什么导致了问题。

本地运行输出：在此处输入图像描述

是什么导致代码在本地运行时向我显示不同的结果？

<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
  <style>
    .slider {
      width: 650px;
      margin: 0 auto;
    }
    
    img {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
  </div>
  <script>
    $('.slider').slick({
      slidesToShow: 3,
      slidesToScroll: 3,
      dots: true,
      infinite: true,
      cssEase: 'linear'
    });
  </script>
</body>
</html>

编辑：

JS 控制台输出：

jquery.min.js:3 [干预] 检测到慢速网络。有关详细信息，请参阅 https://www.chromestatus.com/feature/5636954674692096 。加载时将使用后备字体： https ://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/fonts/slick.woff

然而，我的慢速网络在 jsfiddle 上运行良好，我认为这与我的问题无关。

标签： jqueryhtmlcssslick.js

解决方案

如果您在浏览器上正常打开文件，它将无法正常工作。

尝试index.html从localhost. 它将解决问题。

推荐阅读