Slick Slider 不適用於黎明的產品推薦部分 shopify

Question

我試圖在產品推薦部分顯示 6 種產品，我想在 slider 中顯示它們。我使用 slick slider 來創建我所有的滑塊，但此時它不起作用，slick slider 沒有初始化，我的 slick 代碼是完美，go有什么錯？ 這是我的代碼..

光滑的 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
            }
        }
    ],
});

產品推薦.liquid

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

Answer 1

您的代碼可能無法正常工作，因為在您查找 DOM 元素時尚未創建它們。 在使用 window 完全加載 window 后運行您的代碼：

• 加載事件

當整個頁面加載完成時觸發，包括所有相關資源，例如樣式表、腳本、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() { })