这是我的代码，谁能帮我找出错误？
我在这里要做的是制作一个轮播，其中仅显示一张幻灯片，而另外两张幻灯片显示在背景中。但问题是代码没有做任何事情，只是理想地坐在那里。
我已经添加了正确运行 slick slider 程序所需的所有更新文件。
抱歉这么大惊小怪，我正在努力解决这个问题，这是我第一次在我的元素中使用它。也许我错过了什么，但我已经检查了一百次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Home</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./css/all.min.css" />
<link rel="stylesheet" type="text/css" href="./css/slick.css" />
<link rel="stylesheet" type="text/css" href="./css/slick-theme.css" />
</head>
<body>
<div class="container">
<div class="slider slider-port row">
<div>
<div class="card" style="width: 18rem;">
<img
src="./images/brickwork.jpg"
class="card-img-top"
alt="1. Bangalore Stone Works"
/>
<div class="card-body">
<h5 class="card-title">Bangalore Stone Works</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div>
<div class="card" style="width: 18rem;">
<img
src="./images/concrete.jpg"
class="card-img-top"
alt="2. Porbandar Stone Works"
/>
<div class="card-body">
<h5 class="card-title">Porbandar Stone Works</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div>
<div class="card" style="width: 18rem;">
<img
src="./images/brickwork.jpg"
class="card-img-top"
alt="3. Rajawadi Gate"
/>
<div class="card-body">
<h5 class="card-title">Rajawadi Gate</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div>
<div class="card" style="width: 18rem;">
<img
src="./images/concrete.jpg"
class="card-img-top"
alt="4. Wooden Works"
/>
<div class="card-body">
<h5 class="card-title">Wooden Works</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div>
<div class="card" style="width: 18rem;">
<img
src="./images/brickwork.jpg"
class="card-img-top"
alt="5. Compund Wall"
/>
<div class="card-body">
<h5 class="card-title">Compound Wall</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div>
<div class="card" style="width: 18rem;">
<img
src="./images/concrete.jpg"
class="card-img-top"
alt="6. Flooring"
/>
<div class="card-body">
<h5 class="card-title">Flooring</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONIALS -->
<section id="testimonial-section" class="p-4 bg-dark text-white">
<div class="container">
<h2 class="text-center">Testimonials</h2>
<div class="row">
<div class="col">
<div class="test-slider text-center">
<div>
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo, sunt!
</p>
<footer class="blockquote-footer">
John Doe From <cite title="Company 1">Company 1</cite>
</footer>
</blockquote>
</div>
<div>
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo, sunt!
</p>
<footer class="blockquote-footer">
Steve Smith From <cite title="Company 2">Company 2</cite>
</footer>
</blockquote>
</div>
<div>
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo, sunt!
</p>
<footer class="blockquote-footer">
Megan Williams From <cite title="Company 3">Company 3</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="p-5">
</footer>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/popper.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/all.min.js"></script>
<script type="text/javascript" src="./js/slick.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script>
$(document).ready(function() {
$(".dropdown").hover(
function() {
$(".dropdown-menu", this)
.stop(true, true)
.slideDown("fast");
$(this).toggleClass("open");
},
function() {
$(".dropdown-menu", this)
.stop(true, true)
.slideUp("fast");
$(this).toggleClass("open");
}
);
});
</script>
<script>
$(document).ready(function() {
$(".test-slider").slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
});
</script>
<script>
$(document).ready(function() {
$(".slider-port").slick({
centerMode: true,
centerPadding: "60px",
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: "40px",
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: "40px",
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
最佳答案
很抱歉让你们遭受这种折磨，但是在看到控制台后我发现文件名没有正确写入，这就是它显示错误的原因 - “加载资源失败:net::ERR_FILE_NOT_FOUND ".
我检查了所有文件名，发现 slick.js 需要在名称中的 .js 之前加上 .min。完成此操作后，一切正常。
只是我之前没有看到控制台，看到没有解决方案正常工作，我感到很沮丧。
关于javascript - 我无法正确使用光滑的 slider ，它没有显示任何类型的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59039627/