Question

我正在创建一个网站来展示一个项目，并且我必须对可以同时看到几个对象的幻灯片进行演示。为此，我计划使用以下命令：https://kenwheeler.github.io/slick/

我已经按照教程进行操作，只是试图做一个简单的例子来了解它的工作原理，问题出在我认为的jquery或精巧的资源上……但是由于我不是那方面的专家，所以我找不到解决方案，它总是告诉我：“无法加载资源：服务器以404（未找到）状态进行了响应。”

如果有人知道如何解决问题，那将是一个很大的帮助：D（我相信这没什么大不了，但是...）。

我试图更改链接在文档中的位置，以为可能是这样。

我已经从slick下载文件，并将其放置在我的文件夹中。

这是在标题中

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

这是身体的一部分

<div class="testslicktrack">
    <div><h4>test1</h4></div>
    <div><h4>test2</h4></div>
    <div><h4>test3</h4></div>
    <div><h4>test4</h4></div>
    <div><h4>test5</h4></div>
    <div><h4>test6/h4></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">
    $('.testslicktrack').slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  </script>

Answer 1

您的设置似乎很好-因为我已用在线CDN替换了您的链接，但它们似乎可以正常工作。您还只需要一个到jQuery的链接（在页脚中）。从下面的示例中可以看到，标题中不需要一个。

您确定所有指向脚本/样式的链接都正确吗？您可以使用在线链接（CDN），就像我在下面的答案中所述的那样，使您的生活更加轻松，并避免以后出现这些问题：）

$('.testslicktrack').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
</head>

<div class="testslicktrack">
  <div>
    <h4>test1</h4>
  </div>
  <div>
    <h4>test2</h4>
  </div>
  <div>
    <h4>test3</h4>
  </div>
  <div>
    <h4>test4</h4>
  </div>
  <div>
    <h4>test5</h4>
  </div>
  <div>
    <h4>test6</h4>
  </div>
</div>

<footer>
  <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="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</footer>

Answer 2

该错误的原因是文件不存在于他遵循的教程使用的路径中。只需定义正确的路径即可解决此问题。

@LéonardFONTAINE已经纠正了这一问题，只需在此处添加即可，以便其他用户在发现某种问题时可以看到答案。

无法加载资源错误：服务器响应状态为404（未找到）

2 个答案: