时间戳

首页 > 解决方案 > 我需要在我的网站 JS 中使用 Slick Carousel 作为英雄滑块

javascript - 我需要在我的网站 JS 中使用 Slick Carousel 作为英雄滑块

问题描述

我仍在学习 javascript，现在我正在尝试让 Slick Carousel 工作。我需要它作为我网页中的英雄滑块

github 上的 Slick 轮播： https ://github.com/kenwheeler/slick/

这是我到目前为止所拥有的：

<html>
  <head>
  <title>Hero Slider</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
  </head>
  <body>

  <div class="single-item">
    <div><img src="https://images.unsplash.com/photo-1604467758117-72d987cb513b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="test"></div>
    <div><img src="https://images.unsplash.com/photo-1604475935971-c390654d2332?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=321&q=80" alt="test"></div>
    <div><img src="https://images.unsplash.com/photo-1604470690311-c4136298584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=714&q=80" alt="test"></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="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

  <script type="text/javascript">
    $('.single-item').slick();
    });
  </script>
  </body>
  </html>

你能指导我让这个运行缺少什么吗？如前所述，我需要它成为英雄滑块，并且在此之后我将在此网页上添加一个标题。所以这也应该适用。

标签： javascripthtmljquerycssslick.js

解决方案

只有一个小错字。

<html>
  <head>
  <title>Hero Slider</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
  </head>
  <body>

  <div class="single-item">
    <div><img src="https://images.unsplash.com/photo-1604467758117-72d987cb513b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="test"></div>
    <div><img src="https://images.unsplash.com/photo-1604475935971-c390654d2332?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=321&q=80" alt="test"></div>
    <div><img src="https://images.unsplash.com/photo-1604470690311-c4136298584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=714&q=80" alt="test"></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="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

  <script type="text/javascript">
    $('.single-item').slick();
    //Removed a }); here
  </script>
  </body>
  </html>

推荐阅读