Multiple slideshows on one page makes the first one not work anymore

First of all I know this question's been asked before, the answer wasn't solving my problem so I'd like to ask it again here:

I'm using the code blocks to create more customized slideshows. I need more than one slideshow on my page and the second one stops the first one from working.  The slideshow is here but clicking the arrows won't do anything. I slightly understand what the problem is but can't fix it. Here is the link to the page which contains 2 slideshows (the code of each slideshow is working as expected when there's only one slideshow).

Here’re some solutions I found and tried but didn’t work out:

https://stackoverflow.com/questions/43299759/how-do-i-make-multiple-slideshows-in-the-same-html-document/43300869

https://stackoverflow.com/questions/55558405/multiple-slideshows-not-working-html-css-js/55559095

https://stackoverflow.com/questions/41541559/multiple-slideshows-on-one-page-makes-the-first-one-not-work-anymore

The ‘code‘ you have posted is an HTML page and is designed to be added to a hosted site as an HTML page, but on a platform other than Squarespace. This isn’t suitable for embedding on an existing HTML page, for example in a code block on Squarespace. Also, as it is a complete page (with head and body) it isn’t designed to appear twice on one page. 
 

If you’d like to customise a slideshow, you would be better adding a Squarespace slideshow, for example a Gallery page in an Index, and then explain how you would like to customise it. The community can then suggest ways to achieve this. 

The problem with 7.1 Squarespace slideshow is that I cannot add spacing block to resize the slides anymore. If I resize the slideshow width in the setting, the height of the slideshow will be cut off.