Slick.js Shopify 上的滑块

Question

我在 Shopify 上遇到 Slick.js 的问题。

我在本地服务器的 VisualCode 上测试了一个滑块，Slick 运行良好。

但是当我把同样的代码放到Shopify中时，jQuery好像没有看到这个。

我已经粘贴了所有的 CDN 和脚本。

有趣的是，如果我将相同的 Slick jQuery 代码粘贴到 Developer Tools > Console，那么 Slick 就可以工作了。

这是一个简单的代码，可以在本地运行，但不能在 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>

请问有什么建议吗？

我正在研究 'Expanse' 主题。

谢谢

Answer 1

您需要在一段时间后尝试 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);
});

Slick.js Shopify 上的滑块

Slick.js slider on Shopify

jquery

slider

shopify

slick