光滑滑块不适用于 shopify 黎明的产品推荐部分

Question

我想在产品推荐部分显示6个产品，我想在滑块中显示它们。我使用滑块来创建我所有的滑块，但在这个不工作，滑块不初始化，我的滑块代码是完美的，什么会出错?这是我的代码。

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元素时尚未创建它们。在窗口完全加载后运行代码，使用window:

<<ul>

加载事件/gh>

在整个页面加载完成时触发，包括所有依赖的页面如样式表、脚本、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() { })