购物上的Slick.js滑块
购物上的Slick.js滑块
提问于 2021-08-23 14:03:58
我正在和Slick.js在购物上苦苦挣扎。
我在本地服务器上的VisualCode上测试了一个滑块，Slick运行良好。
但是当我把同样的代码放到Shopify中时，jQuery似乎看不到这一点。
我已经粘贴了所有的CDN和脚本。
有趣的是，如果我将相同的圆滑jQuery代码粘贴到开发人员工具>控制台上，那么圆滑就可以工作。
这是一个简单的代码，可以在本地运行，但不能在shopify上运行：
<!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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<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>
<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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- <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="collection-slider">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<style>
.slick-prev, .slick-next{
border: 2px solid green;
}
.collection-slider{
width: 60%;
margin: 0 auto;
border: 1px solid black;
background-color: gray;
}
.collection-slider div{
margin: 5px;
background-color: lightcyan;
border:1px solid red;
}
</style>
<script>
$(document).ready(function(){
$('.collection-slider').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
</script>
</body>
</html>我能有什么建议吗？
我正在做“扩展”的主题。
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-24 05:38:15
您需要尝试使用setInterval在一段时间后运行代码并检查页面上的HTML元素，一旦找到HTML元素并使用clearInterval清除间隔，您还可以在此处setInterval，clearInterval阅读有关这些函数的更多信息
$(document).ready(function () {
var found = setInterval(function(){
if( $(".collection-slider").length ){
clearInterval(found);
}
// slick slider code
$(".collection-slider").slick({
dots: !1,
infinite: !1,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: !0,
dots: !0
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
}, 200);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68894091
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号