Question

我的网页上显示的光滑滑块出现问题。我已经搜索了这个问题的解决方案，但我没有找到任何解决方案，为什么这不起作用。我看过如下的线程：

I can't get my Slick slider to work at all

和其他人，但我无法弄清楚我的生活中我做错了什么。这是我的第一篇文章，所以如果我没有提供足够的信息，或者我没有正确地做某事，请提前道歉。任何帮助，将不胜感激。谢谢。

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <title>Root Cellar</title>

      <!-- google fonts -->
      <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>

      <!-- jquery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- styles --> 
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="slick/slick.css"/>
      <link rel="stylesheet" href="slick/slick-theme.css"/>
      <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Project</h1>
        <h2>Subtitle.</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Main</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="testclientpage.html" class="selected">Test</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/placeholder.jpg" alt="Placeholder" class="profile-photo">
        <h3>About</h3>
        <p>Hello, this is test text.</p>
      </section>

      <!-- code for slider -->             
      <div class="container" id="slider">
        <div class="slides">
          <div class="slide"><img src="img/web1.jpg"></div>
          <div class="slide"><img src="img/web2.jpg"></div>
          <div class="slide"><img src="img/web3.jpg"></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(){       
            $('.slider').slick({
              dots: true,
              infinite: true,
              speed: 700,
              autoplay: true,
              autoplaySpeed: 2000,
              arrows:false,
              slidesToShow: 1,
              slidesToScroll: 1
            });
          });
        </script>
      </div>                
      <!-- end code for slider -->      

      <footer>
        <p>&copy; 2016 Taylor Reeves.</p>
      </footer>
    </div>
  </body>
</html>

Answer 1

在您的脚本中，您没有选择div所有img。您应该使用选择器$('.container')而不是$('.slider')，因为“slider”是ID。

查看此帖子I can't get my Slick slider to work at all，无论如何，我建议您先使用Slick的使用示例（http://kenwheeler.github.io/slick/），然后再添加HTML。

光滑滑块无法正常工作

1 个答案: