Shopify Liquid 文件中的部分加载事件 (Shopify)

Question

I am Shopify developer. I designed a slideshow using Flickity library in Shopify. My slider working fine on URL when load but it's not work on Shopify Theme Editor, till I am not saved the design. after save design is working fine.

I am using this script in section file it's not working but when I paste this code in theme.liquid file it's working fine on both sides.

I don't want like this image

<script>
  {% if request.design_mode %}
        console.log("123");
        document.addEventListener("shopify:section:load", function() {
        console.log("abc");
        var elem = document.querySelector('.carousel');
            var flkty = new Flickity( elem, {
                autoPlay: "{{ section.settings.autoplay_slide }}", 
                pageDots: true, 
                contain: true, 
                wrapAround: false, 
                imagesLoaded: true, 
                accessibility: false
            });
        });
      {% endif %}
</script>

I want, that when i select section from theme editor it's working smoothly.

I want like this image

Answer 1

Instead of using shopify:section:load which fires only inside the theme editor (that's why you can't get it working outside of theme editor), you should include this <script> tag in the end of your section's code and change it a bit:

<script>
  {% if request.design_mode %}
        console.log("123");
        let flkty; // for later use
        document.addEventListener("DOMContentLoaded", function() { // run this script after window is ready and scripts are loaded
            console.log("abc");
            var elem = document.querySelector('.carousel');
            if (elem) { // check if element was found before using it
                 flkty = new Flickity( elem, {
                    autoPlay: "{{ section.settings.autoplay_slide }}", 
                    pageDots: true, 
                    contain: true, 
                    wrapAround: false, 
                    imagesLoaded: true, 
                    accessibility: false
                 });
             }
        });
      {% endif %}
</script>