Shopify 上的 Slick Slider Customize - 图像块在保存前垂直堆叠

Question

我正在尝试为 shopify 主题创建一个光滑的滑块。用户可以将图像作为幻灯片上传的幻灯片，这些幻灯片将作为块工作（基本上幻灯片的编码是在 forloop 中）它实际上可以工作，但无论何时用户添加第二个块并在其上上传图像，图像堆叠并且在添加后保存在自定义中时，它可以正常工作.. 我在这里尝试了很多东西，当我们添加块时，似乎 jquery 不会运行，并且当我们保存主题时，它会刷新页面，这样 slick jquery 就可以工作了。 .

Answer 1

找到解决方案，对我有用

$(function () {
    slick_slider();
});

$(document).on("shopify:section:load", function () {
    slick_slider();
});

$(document).on("shopify:section:unload", function () {
  slick_slider();
});

$(document).on("shopify:section:select", function () {
  slick_slider();
});

$(document).on("shopify:section:deselect", function () {
  slick_slider();
});

function slick_slider() {
  $(".slideshow__slick").not(".slick-initialized").slick({
    infinite: true,
    slidesToShow: 1,
    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>",
  });
}

Shopify 上的 Slick Slider Customize - 图像块在保存前垂直堆叠

Slick Slider on Shopify Customize - Image Blocks Stacks Vertically Before Saving

javascript

jquery

slider

shopify

slick.js