shopify 幻燈片部分中的一個奇怪問題

Question

希望你們做得好。

所以我使用 Swiper js 創建幻燈片部分，真正的問題是在主題編輯器中，當我添加部分並單擊幻燈片 2 時，例如我的腳本不起作用，但是當我保存更改時它工作正常。

我錯過了什么？

這是我為單擊每張幻燈片時更改幻燈片而寫的內容

 {% if request.design_mode %}
        $(document)
        .on('shopify:section:load', MakeTheSlider )
        .on('shopify:section:unload', process_slick_event )
        .on('shopify:section:select', process_slick_event )
        .on('shopify:section:deselect', process_slick_event )
        .on('shopify:section:reorder', process_slick_event )
        .on('shopify:block:select', process_slick_event )
        .on('shopify:block:deselect', process_slick_event );
      {% endif %}
 
  function process_slick_event(evt){
        if(evt.detail.sectionId === '{{section.id}}'){
          var CurrentSlide = $("#slideshow-{{ section.id }}").find('#'+evt.target.id).data('index');
 
          $("#slideshow-{{ section.id }} #pagginat-{{ section.id }} :eq("+CurrentSlide+")").click();
        }
      }

我有另一個問題。 為什么當用戶添加一個部分並且需要保存或刷新才能正常工作時，js 代碼不起作用？ 我們對此有什么解決方案嗎？ 提前致謝。

Answer 1

沒什么好擔心的。 如果添加外部 JS 文件。 加載需要一些時間。 如果一個編輯器是打開的，它看起來像是壞了。 保存后就沒事了。 在使用 slick 和 owl-carousels 時也發生在我身上。