Slick Slider 不适用于 Shopifyawn 的产品推荐部分

Question

我正在尝试在产品推荐部分显示 6 个产品，并且我想在滑块中显示它们。我使用 slick slider 创建所有滑块，但此时它不起作用，slick slider 未初始化，并且我的 slick 代码很完美，会出现什么问题？这是我的代码..

光滑的js👇🏻

$(".product_recommendation_slick").not(".slick-initialized").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    prevArrow:
        "<div class='slick-prev'><i class='fas fa-angle-left'></i></div>",
    nextArrow:
        "<div class='slick-next'><i class='fas fa-angle-right'></i></div>",
    autoplay: false,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 420,
            settings: {
                slidesToShow: 1
            }
        }
    ],
});

产品推荐.液体👇🏻

<div class="row product_recommendation_slick">
   {% for recommendation in recommendations.products %}
      {% render 'product-card',
         product_card_product: recommendation
      %}
   {% endfor %}
</div>

Answer 1

您的代码可能无法正常工作，因为当您查找 DOM 元素时尚未创建它们。使用窗口完全加载窗口后运行代码：

• 加载事件

加载整个页面（包括所有依赖的页面）时触发 样式表、脚本、iframe 和图像等资源。

// vanilla JS
window.addEventListener("load", (event) => {});
window.onload = (event) => {};

// JQuery
$(window).on('load', function() { })

• 或 DOMContentLoaded 事件

页面 DOM 加载完成后立即触发，无需等待 资源加载完毕

// vanilla JS
window.addEventListener('DOMContentLoaded', (event) => {});
window.onDOMContentLoaded = (event) => { };

// JQuery    
$(window).on('ready', function() { })

Answer 2

您可以使用下面的代码 setTimeout 函数帮助在 3 秒后调用 slick 函数

$(document).ready(function () {
    setTimeout(function () {

$(".product_recommendation_slick").not(".slick-initialized").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    prevArrow:
        "<div class='slick-prev'><i class='fas fa-angle-left'></i></div>",
    nextArrow:
        "<div class='slick-next'><i class='fas fa-angle-right'></i></div>",
    autoplay: false,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 420,
            settings: {
                slidesToShow: 1
            }
        }
    ],
});
}, 3000); // Change the delay time (in milliseconds) as needed
});