gpt4 book ai didi

jQuery slick 轮播插件不起作用

转载 作者:行者123 更新时间:2023-12-03 23:04:21 27 4
gpt4 key购买 nike

我无法使用光滑的轮播插件。我已经阅读了这里的所有线程,但我确信一切都很好。但似乎并非如此:D。这是我的代码:

<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

</head>
<body>

<div class="test">
<div><img id="" width="300" height="200" src=""> </div>
<div><img id="" width="300" height="200" src=""> </div>
<div><img id="" width="300" height="200" src=""> </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://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(){
$('.test').slick({
setting-name: setting-value
});
});
</script>

</body>
</html>

我确定我需要的所有内容都已加载,这是 chrome 开发工具的屏幕

Screen

我还尝试通过 cdn.jsdelivr.net 包含 css。

最佳答案

要使光滑的轮播插件正常工作,您需要设置一些有效设置。由于设置名称:设置值,您的设置不起作用。这是一个有效的设置示例。所有引用都是通过 CDN 添加的,因此您只需将其复制并粘贴到页面中即可正常工作:

<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).on('ready', function () {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
</body>

输出:

Slick Carousel

关于jQuery slick 轮播插件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37308687/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com