Javascript 光滑滑块不工作_Javascript_Jquery_Html_Css

Javascript 光滑滑块不工作

javascript jquery html css

Javascript 光滑滑块不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的网页上显示的滑动条有问题。我已经为这个问题寻找了一个解决方案，但是我还没有找到任何解决方案来解释为什么这个方法不起作用。我已经研究了以下线程：和其他人，但我无法终生找出我做错了什么。这是我的第一篇帖子，所以如果我没有提供足够的信息，或者如果我没有做正确的事情，请提前道歉。任何帮助都将不胜感激。多谢各位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

我的网页上显示的滑动条有问题。我已经为这个问题寻找了一个解决方案，但是我还没有找到任何解决方案来解释为什么这个方法不起作用。我已经研究了以下线程：

和其他人，但我无法终生找出我做错了什么。这是我的第一篇帖子，所以如果我没有提供足够的信息，或者如果我没有做正确的事情，请提前道歉。任何帮助都将不胜感激。多谢各位

 <!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>


根窖






关于
你好，这是测试文本
$（文档）.ready（函数（）{
$（'.slider'）。光滑({
点：是的，
无限：是的，
速度:700,，
自动播放：对，
自动播放速度：2000，
箭头：错，
幻灯片放映：1，
幻灯片滚动：1
});
});
&抄袭；2016年泰勒·里夫斯

在脚本中，您没有使用所有

img

选择

div

。您应该使用as选择器

$（'.container'）

而不是

$（'.slider'）

，因为“slider”是id

查看这篇文章，无论如何，我建议您先使用Slick的用法示例（），然后再添加HTML。

请给我们一个MCVE（请参阅帮助）——更好的是，将它放在jsfiddle.net上，这很简单。感谢您如此快速地回答我的问题。我将$（'.slider'）更改为$（'.container'），并修复了画廊开始运行的主要问题之一。然后我清理了我的沙发。