Shopify Section load event in Liquid file (Shopify) - 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>