添加自定义JavaScript后，功能停止工作

Question

I am a JavaScript beginner and I am hoping someone here could help me solve this:

I've added this JavaScript to header using header and footers plugin:

<script src="https://ajax.googleapis.com/…/li…/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<script>
$(document).ready(function(){
  $(".zavrit").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>

I am targeting it to the sections with contact forms all over the page because my client wanted to reveal them on click. (I am using a text editor to add the sections with shortcodes to the divs with custom classes)

The function is working just fine, but the problem is, the image carousel lightbox feature stopped working properly, as when you click on an image and want to slide to another, the arrows don't work. Also, you cant close the lightbox by clicking somewhere on the overlay.

I am really a beginner in the custom code so its possible that I just made some stupid mistake, can you help?

PAGE URL: http://test.sbweb.cz

When I remove the script the carousel works fine, is there any other option for the script maybe to just execute when the buttons are clicked?

Answer 1

I´ve finally found a solution to make elementor features work with the jquery script, I just had to delete the "src" part of the script, now everything work fine. Probably there was the same source from elementor somewhere in the code..