这是我的代码，有人可以帮我找到错误吗？
我在这里想要做的是制作一个轮播，其中只显示1张幻灯片，而其他2张在背景中显示。但事实是，代码没有做任何事情，只是理想地坐在那里。
我已经添加了正确运行光滑滑块程序所需的所有更新文件。
很抱歉，我正在努力弄清楚这个问题，这是我第一次在项目中使用它。也许我错过了一些东西，但是我已经检查了一百次。
<!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>
答案 0 :(得分：1)
很抱歉使您遭受这种折磨，但是在看到控制台后，我发现文件名未正确写入，这就是为什么它显示错误-“无法加载资源：net :: ERR_FILE_NOT_FOUND “。
我检查了所有文件名，发现slick.js名称中的.js之前需要.min。完成此操作后，一切正常。
只是我之前没有看到控制台，而沮丧地看着没有解决方案能正常工作。