How can I fix my custom slideshow script in theme editor?

[masoneaton]

Hi everyone,

Hope you guys doing well.

so i'm using Swiper js to create a slideshow section, the real problem is in theme editor, when i add the section and click on slide 2 for example my script not working, but when i save the changes it works fine.

did i miss something?

here is what i've wrote for changing slide when click on each slide

 {% 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();

        }

      }

i have another question.

why js code does not work when user add a section and it needs a save or refresh to works fine?

do we have any solution about that?

thanks in advance.