Slick Slider 在网站上不起作用？
Posted
技术标签:
【中文标题】Slick Slider 在网站上不起作用？【英文标题】：Slick Slider is not working on the website? 【发布时间】：2021-10-29 23:54:43 【问题描述】：我正在使用 Bootstrap 和 Slick 滑块制作一个滑块我已经添加了所有必需的 CDN 但我不知道为什么它不起作用我在互联网上搜索过这个 *** 上有很多问题就像 slick slider not working 和 @ 987654322@但没有一个
$('.testmonials').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
]
);
body
padding:50px 20px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"
integrity="sha512-2fk3Q4NXPYAqIha0glLZ2nluueK43aNoxvijPf53+DgL7UW9mkN+uXc1aEmnZdkkZVvtJZltpRt+JqTWc3TS3Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="mystyle.css">
<link rel="stylesheet" href="Carousel.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"
integrity="sha512-NWNl2ZLgVBoi6lTcMsHgCQyrZVFnSmcaa3zRv0L3aoGXshwoxkGs3esa9zwQHsChGRL4aLDnJjJJeP6MjPX46Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"
integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Testimonials Slider -->
<div class="row testmonials">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
<script src="carousel.js"></script>
<!-- Jquery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Slick Slider CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Slick Slider Function -->
<script src="slicker.js"></script>
</body>
</html>对我有帮助。 那么请谁能帮帮我？
【问题讨论】：
【参考方案1】：我看到您的代码重复了。 JQuery 会为您选择具有相同类的所有元素，因此请删除第二个和第三个 slicks。
另外，错误是由两次调用'init'引起的。 Error in slick.js: "Uncaught TypeError: Cannot read property 'add' of null"
【讨论】：
能否请您详细说明或以答案格式发布 是的。该错误是由您调用 slick 四次引起的。 我已经删除了 Slicks 但仍然无法正常工作 Only This error in my console " Refused to apply style from '127.0.0.1:5500/style.css' 因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查. " 你包含了 jQuery 两次。删除一个。【参考方案2】：将您的滑块初始化文件放在 slick slider js cdn 文件下，希望它能工作
【讨论】：
以上是关于Slick Slider 在网站上不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
React-slick carousel - 自动播放在子组件中不起作用，同时使用父组件的道具触发它