我的网页上显示的光滑 slider 有问题。我已经为这个问题寻找了解决方案，但我还没有找到任何解决方案来解释为什么这不起作用。我看过以下主题:
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>© 2016 Taylor Reeves.</p>
</footer>
</div>
</body>
</html>
最佳答案
在您的脚本中，您没有选择带有所有 img 的 div。您应该使用 $('.container') 而不是 $('.slider') 作为选择器，因为“slider”是 id。
查看此帖子 I can't get my Slick slider to work at all无论如何，我建议您首先使用 Slick 的用法示例 (http://kenwheeler.github.io/slick/)，然后再添加您的 HTML。
关于javascript - 光滑的 slider 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35610780/