Make a reusable image slider

Hi. I’d like to make a reusable image slider. Let’s say I use this one https://www.w3schools.com/howto/howto_js_slideshow.asp

It has three parts: HTML, CSS, JS

CSS: goes into global styles

HTML: add it through patterns, then ‘detach’ it when adding to a new page, and edit the URLs with new images.

JS:
1. create an Element block with JS (element type: post meta template; location: custom; hook name: wp_footer).
2. Create a custom field “image-slider” on the page I want to display the slider on.
3. Add conditional logic to the Element to display it only on pages with the custom field “image-slider”

Is it a correct approach? I’m missing something since it doesn’t work properly.